Question

我希望我的下拉菜单标题打开相关菜单并直接显示子菜单的第一个元素的内容，该元素实际上是页面中的锚链接。以下是下拉菜单的 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 代码我尝试使用但没有成功。如果我写一个完整的网址，例如＆＃34; www.google.com＆＃34;但不是＆＃34;＃submenu1＆＃34;。

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

Answer 1

尝试使用window.location.hash吗？

window.location.hash=anchorname;

修改的

您正在使用Twitter引导程序吗？在添加活动课程之前，选项卡不会显示，而且由于您也有淡入淡出课程，我认为您还需要使用＆＃39; in＆＃39; class ...试试这个 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";
});

我并不完全确定您尝试实现的目标，下拉菜单中的链接应该为您显示...但是如果您只是想强制使用特定标签当你第一次点击导航下拉列表时打开，那么这应该可以解决问题。

Answer 2

你可以试试

location.hash = anchorname

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

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

下拉标题链接到锚点

2 个答案: