我想要一个动态导航栏，这样我就有了三个标签:
行为应该是当我点击一个选项卡时，它会将我重定向到该选项卡含义所在的页面部分，并且还有导航选项卡以便我可以导航。一些图片显示了我试图解释的内容:
我想要的是浏览这些选项卡，但不知何故，我的代码无法实现这一点。
<ul class="nav nav-tabs">
<li role="presentation" {if $nvTb eq 0} class="active" style="color: #9a8745" {/if}>
<a role="tab" {if $nvTb eq 1} id="fichaScroll" {else} data-toggle="tab" {/if}>
{assign var="iddiccionario" value=$arrayProductoSubmenu["ficha"]["iddiccionario"]}
{$diccionario.$iddiccionario}
</a>
</li>
<li role="presentation" {if $nvTb eq 1} class="active" style="color: #9a8745" {/if}>
<a role="tab"
{if $nvTb eq 0} id="galeriaScroll" {else} data-toggle="tab" {/if}>
{$diccionario.dic_miniaturas}
</a>
</li>
<li role="presentation" {if $nvTb eq 2} class="active" style="color: #9a8745" {/if}>
<a role="tab" {if $nvTb eq 0} id="opinionesScroll" {else} data-toggle="tab" {/if}>
{$diccionario.dic_opiniones_productos}
</a>
</li>
有什么帮助吗？
这也是整个页面的图像。
最佳答案
我将其发布在一个新答案中，因为它确实很大，并且会弄乱其他答案。您可以更改导航栏的外观并向其添加 css。但这应该很简单。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="150" id="home">
<div id="Description">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#Description">Description</a></li>
<li><a href="#Thumbnails">Thumbnails</a></li>
<li><a href="#Customer_Reviews">Customer Reviews</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div>
<h2>Description</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..</p>
</div>
</div>
<hr />
<div id="Thumbnails">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#Description">Description</a></li>
<li class="active"><a href="#Thumbnails">Thumbnails</a></li>
<li><a href="#Customer_Reviews">Customer Reviews</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div>
<h2>Thumbnails</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..</p>
</div>
</div>
<hr />
<div id="Customer_Reviews">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#Description">Description</a></li>
<li><a href="#Thumbnails">Thumbnails</a></li>
<li class="active"><a href="#Customer_Reviews">Customer Reviews</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div>
<h2>Customer Reviews</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..</p>
</div>
</div>
<!-- add the script for smooth scrolling -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script rel="text/javascript">
$(function() {
$('a[href*="#"]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 750);
return false;
}
}
});
});
</script>
</body>关于html - 正确的导航选项卡配置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39508181/