正确的导航选项卡配置

我想有一个动态的导航栏，让我有三个标签：正确的导航选项卡配置

行为应该是，当我点击进入一个标签，它重定向我的页面，该选项卡中的意义的一部分是，还有导航选项卡，所以我可以导航。有些图片显示我尝试什么解释：

我要的是通过这些选项卡，并以某种方式来浏览，我的代码并没有做到这一点。

<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>

任何帮助吗？

这里也是整个页面的图像。

来源

2016-09-15 user6375350

我发布了这个新的答案，因为它真的很大，它会弄乱其他答案。您可能会更改导航栏的外观并将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"> 
 
\t <div class="navbar-wrapper"> 
 
\t \t <div class="container"> 
 
\t \t \t <nav class="navbar"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="navbar" class="navbar-collapse collapse"> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t <li class="active"><a href="#Description">Description</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#Thumbnails">Thumbnails</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#Customer_Reviews">Customer Reviews</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 
\t <div> 
 
\t \t <h2>Description</h2> 
 
\t \t <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> 
 
\t </div> 
 
</div> 
 
\t 
 
\t <hr /> 
 
\t 
 
<div id="Thumbnails"> 
 
\t <div class="navbar-wrapper"> 
 
\t \t <div class="container"> 
 
\t \t \t <nav class="navbar"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="navbar" class="navbar-collapse collapse"> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t <li><a href="#Description">Description</a></li> 
 
\t \t \t \t \t \t \t <li class="active"><a href="#Thumbnails">Thumbnails</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#Customer_Reviews">Customer Reviews</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 
\t <div> 
 
\t \t <h2>Thumbnails</h2> 
 
\t \t <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> 
 
\t </div> 
 
</div> 
 

 
\t <hr /> 
 

 
<div id="Customer_Reviews"> 
 
\t <div class="navbar-wrapper"> 
 
\t \t <div class="container"> 
 
\t \t \t <nav class="navbar"> 
 
\t \t \t \t <div class="container"> 
 
\t \t \t \t \t <div id="navbar" class="navbar-collapse collapse"> 
 
\t \t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t <li><a href="#Description">Description</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#Thumbnails">Thumbnails</a></li> 
 
\t \t \t \t \t \t \t <li class="active"><a href="#Customer_Reviews">Customer Reviews</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 
\t <div> 
 
\t \t <h2>Customer Reviews</h2> 
 
\t \t <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> 
 
\t </div> 
 
</div> 
 
\t 
 
\t <!-- add the script for smooth scrolling --> 
 
\t <script src="js/jquery.js"></script> 
 
\t <script src="js/bootstrap.js"></script> 
 
\t <script rel="text/javascript"> 
 
\t \t $(function() { 
 
\t \t $('a[href*="#"]').click(function() { 
 
\t \t \t if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 
\t \t \t var target = $(this.hash); 
 
\t \t \t target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
\t \t \t if (target.length) { 
 
\t \t \t \t $('html, body').animate({ 
 
\t \t \t \t scrollTop: target.offset().top 
 
\t \t \t \t }, 750); 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t } 
 
\t \t }); 
 
\t \t }); 
 
\t </script> 
 
</body>

来源

2016-09-16 08:38:44 Maettel

你的意思是这样here？

也许看看这个文件here。（上一页的源代码）

它是如何工作的？

导航栏中的定位标记指的是“#home”，例如，<a class="navbar-brand" href="#home">SchoolTool</a>，目标位置是通过id标记<div id="home"><p>The Home section </p></div>定位的。

然后它应该跳到这个位置。

如果你想使滚动顺畅，看看这个脚本：

<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>

它不只是在浏览器中显示的网址删除标记，并做了平滑滚动750毫秒。

来源

2016-09-15 11:38:37 Maettel

我必须位于说明，缩略图和客户评论的小节3个导航栏。这三个导航栏完全相同，都有三个标签。我想要的是，如果我点击进入第三个导航栏，进入顾客评论，其中也有该导航栏，然后，如果我点击描述，转到描述小节。 – user6375350

正确的导航选项卡配置

回答

相关问题