正確的導航選項卡配置

我想有一個動態的導航欄，讓我有三個標籤：正確的導航選項卡配置

行爲應該是，當我點擊進入一個標籤，它重定向我的頁面，該選項卡中的意義的一部分是，還有導航選項卡，所以我可以導航。有些圖片顯示我嘗試什麼解釋：

我要的是通過這些選項卡，並以某種方式來瀏覽，我的代碼並沒有做到這一點。

<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

正確的導航選項卡配置

回答

相關問題