適切なナビゲーションタブの設定

行動は、私はタブにクリックしたとき、それはそのタブが意味ページの一部に私をリダイレクトすることでなければなりませんまた、ナビゲーションタブもあるので、ナビゲートすることができます。私が説明しようとするものを示すいくつかの画像：

を私が欲しいものは、私のコードがそれを達成しない、何とかたタブとをナビゲートすることです。

<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

これは本当に大きいので、私はこれを新しい答えに載せました。 navbarの外観を変更し、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このファイルをチェックしてください。（上のページのソースコード）

どのように動作しますか？

navbarのアンカータグは "#home"、たとえば<a class="navbar-brand" href="#home">SchoolTool</a>を参照しています。宛先はid-tag <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>

それは単にブラウザで示されたURLからタグを削除し、750ミリ秒でスムーズスクロールをしますか。

出典

2016-09-15 11:38:37 Maettel

私が説明、サムネイルとカスタマーレビューのサブセクションにある3 navbarsを持っています。これらの3つのナビゲーションバーはすべて同じで、3つのタブがあります。私が望むのは、3番目のナビゲーションバーをクリックしてカスタマーレビューに行き、ナビバーを持っていて、説明をクリックすると、説明サブセクションに移動します。 – user6375350

適切なナビゲーションタブの設定

答えて

関連する問題