0

ドロップダウンに一連のリンクがあるドロップダウン付きのナビゲーションバーがあります。ドロップダウン リストの各リンクは同じページにリンクしていますが、そのページの別のタブにリンクしています。したがって、タブ 3 に移動するリンクをクリックすると、そのページで 3 番目のタブが自動的に選択されて表示されます。これは素晴らしいことですが、そのタブにフォーカスするためにページが自動的に少し下にスクロールされるため、ページは基本的にそのコンテンツにジャンプします。これがこれらの #links の仕組みだと理解していますが、ページをそのコンテンツまでスクロールせずにそのタブを選択する方法はありますか?

ナビゲーション:

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href=http://website.com/page/tabbedpage#howitworks>How it Works</a></li>
<li><a tabindex="-1" href=http://website.com/page/tabbedpage#technology>Technology</a></li>
<li><a tabindex="-1" href=http://website.com/page/tabbedpage#application>Applications</a></li>
<li><a tabindex="-1" href=http://website.com/page/tabbedpage#savings>Savings</a></li>
</ul>

これは、タブを選択するためのすべてのページの上部にあります。

<script type="text/javascript">
 $(function () {
   var activeTab = $('[href=' + location.hash + ']');
   activeTab && activeTab.tab('show');
 });
</script>
4

1 に答える 1

1

アンカータブの位置をオフセットできます。インライン スタイルはお勧めしませんが、例を次に示します。

<a name="howitworks" style="display: block; position: relative; top: -100px;"></a>

もちろん、どれだけ下にスクロールしても一致するようにオフセットを調整します。

于 2013-07-26T15:54:15.917 に答える