我正在尝试根据选择链接此构建器中的页面。我为选项制作了单独的html文件，例如product-01-01.html，product-01-02.html等。
我现在遇到的问题是在选择时链接页面。我使用了一个href，但是当选择完成并且右下方的按钮（在本例中为附件）时，它不会将您带到所选的文件。
以下是我使用的模板...... Product builder
这是我的第一个链接到第二页的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 & 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 & 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>
这是问题的开始。如果您选择白色选项，它会将您带到保存为product-01-01.html的此html文件，但它只是显示为空白屏幕。
如果它只是HTML和CSS我确定它会工作所以我尝试了解href的位置，但我开始认为它与ajax或javascript有关。