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