簡體   English   中英

Dropddown標題鏈接到錨點

[英]Dropddown header links to anchor

我希望我的下拉菜單標題打開相關菜單並直接顯示子菜單的第一個元素的內容,該元素實際上是頁面中的錨鏈接。 以下是下拉菜單的HTML代碼:

 <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav nav-pills nav-stacked">     
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Menu</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li><a href="#submenu1" tabindex="-1" data-toggle="tab">submenu1</a></li>
          <li><a href="#submenu2" tabindex="-1" data-toggle="tab">submenu2</a></li>
        </ul>
    </li> 
  </ul>
</div>  

這是錨定鏈接的HTML代碼:

<div id="myNavbar" class="tab-content">
        <div class="tab-pane fade" id="submenu1">
          <p>submenu1</p>
        </div>
</div>

這是我試圖使用的JS代碼沒有成功。 如果我寫一個像“www.google.com”這樣的整個網址而不是“#submenu1”,它就可以工作。

$(document).ready(function() {
  $('.dropdown').on('click', function () {
   window.location="#submenu1";
  });
});

請嘗試使用window.location.hash嗎?

window.location.hash=anchorname;

編輯

你正在使用Twitter引導程序嗎? 在添加活動類之前,選項卡將不可見,並且由於您也有淡入淡出類,我認為您還需要'in'類...嘗試此JS

$('.dropdown').on('click', function () {
  // Remove any active classes from the tabs
  $('.tab-pane').removeClass('active in');
  // Set the specific #submenu1 to be active
  $('#submenu1').addClass('active in');
  // Scroll the window down to the tabs that are now visible
  window.location.href="#submenu1";
});

我不完全確定你想要實現的是什么,下拉列表中的鏈接應該為你顯示...但是如果你只是想在第一次點擊導航時強制打開一個特定的標簽下拉,然后這應該做的伎倆。

你可以試試

的location.hash = anchorname

location.hash = "Submenu15";
var x = "The anchor " + location.hash;
document.getElementById("demo").innerHTML = x;

小提琴鏈接http://jsfiddle.net/420rL0h2/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM