ссылка href не работает. Это останавливает ajax или java?

Question

Я пытаюсь связать страницы в этом конструкторе в зависимости от выбора. Я сделал отдельные файлы html для выбора, например. product-01-01.html, product-01-02.html и т. д.

Проблема, с которой я столкнулся сейчас, заключается в том, чтобы связать страницы при выборе. Я использовал href, однако, когда сделан выбор и кнопка (в этом примере аксессуары) в правом нижнем углу не приведет вас к выбранному файлу.

Вот шаблон, который я использую... Конструктор продуктов

Вот мой первый html-файл, который отлично ссылается на вторую страницу:

if (!window.jQuery) document.write('<script src="js/jquery-3.0.0.min.js"><\/script>');

<div class="cd-product-builder">
  <header class="main-header">
    <h1>Product Builder</h1>

    <nav class="cd-builder-main-nav disabled">
      <ul>
        <li class="active"><a href="#models">Models</a></li>
        <li><a href="#colors">Colors</a></li>
        <li><a href="#accessories">Accessories</a></li>
        <li><a href="#summary">Summary</a></li>
      </ul>
    </nav>

    <a href="https://codyhouse.co/?p=16220" class="cd-nugget-info hide-on-mobile">Article &amp; Download</a>
  </header>

  <div class="cd-builder-steps">
    <ul>
      <li data-selection="models" class="active builder-step">
        <section class="cd-step-content">
          <header>
            <h1>Select Model</h1>
            <span class="steps-indicator">Step <b>1</b> of 4</span>
          </header>

          <a href="https://codyhouse.co/?p=16220" class="cd-nugget-info hide-on-desktop">Article &amp; Download</a>

          <ul class="models-list options-list cd-col-2">
            <li class="js-option js-radio" data-price="42400" data-model="product-01">
              <span class="name">BMW i3</span>
              <img src="img/product01_col01.jpg" alt="BMW i3">
              <span class="price">from $42.400</span>
              <div class="radio"></div>
            </li>

            <li class="js-option js-radio" data-price="140700" data-model="product-02">
              <span class="name">BMW i8</span>
              <img src="img/product02_col01.jpg" alt="BMW i8">
              <span class="price">from $140.700</span>
              <div class="radio"></div>
            </li>
          </ul>
        </section>
      </li>
      <!-- additional content will be inserted using ajax -->
    </ul>
  </div>

  <footer class="cd-builder-footer disabled step-1">
    <div class="selected-product">
      <img src="img/product01_col01.jpg" alt="Product preview">

      <div class="tot-price">
        <span>Total</span>
        <span class="total">$<b>0</b></span>
      </div>
    </div>

    <nav class="cd-builder-secondary-nav">
      <ul>
        <li class="next nav-item">
          <ul>
            <li class="visible"><a href="#0">Colors</a></li>
            <li><a href="#0">Accessories</a></li>
            <li><a href="#0">Summary</a></li>
            <li class="buy"><a href="#0">Buy Now</a></li>
          </ul>
        </li>
        <li class="prev nav-item">
          <ul>
            <li class="visible"><a href="#0">Models</a></li>
            <li><a href="#0">Models</a></li>
            <li><a href="#0">Colors</a></li>
            <li><a href="#0">Accessories</a></li>
          </ul>
        </li>
      </ul>
    </nav>

    <span class="alert">Please, select a model first!</span>
  </footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

А это страница html, которая появляется при выборе первой модели:

<li data-selection="colors" class="builder-step first-load">
  <section class="cd-step-content">
    <header>
      <h1>Select Color</h1>
      <span class="steps-indicator">Step <b>2</b> of 4</span>
    </header>

    <ul class="cd-product-previews">
      <li class="selected"><img src="img/product01_col01.jpg" alt="Product Preview" class="product-preview"></li>
      <li><img src="img/product01_col02.jpg" alt="Product Preview" class="product-preview"></li>
      <li><img src="img/product01_col03.jpg" alt="Product Preview" class="product-preview"></li>
    </ul>

    <ul class="cd-product-customizer">
      <li data-content="White - $0" data-price="0" class="selected"><a data-color="white" data-model="product-01-01" href="product-01-01.html">White - $0</a></li>
      <li data-content="Mineral Grey - $550" data-price="550"><a data-color="grey" data-model="product-01-02" href="product-01-02.html">Mineral Grey - $550</a></li>
      <li data-content="Orange Metallic - $550" data-price="550"><a data-color="orange" data-model="product-01-03" href="product-01-03.html">Orange Metallic - $550</a></li>
    </ul>
  </section>
</li>

Вот тут и начинается проблема. Если вы выберете белый вариант, вы должны перейти к этому html-файлу, сохраненному как product-01-01.html, но он просто отображается как пустой экран.

Если бы это был просто HTML и CSS, я уверен, что это сработало бы, поэтому я попытался поиграть с местоположением href, но я начинаю думать, что это как-то связано с ajax или javascript.

ссылка href не работает. Это останавливает ajax или java?

Ответы (0)