Question

下拉菜单单击ScrollSpy无法正常工作

enter image description here

$(document).ready(function(){
    $('#details-dropdown li a').click(function(e){
        console.log(e);
        $("#details-menu li").removeClass("active");
        $('#details - menu li a[href="' + $(this).attr('href') + '"]').parent().addClass('active');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<body data-spy="scroll" data-target="#mynav" style="padding-top:70px;">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse" id="mynav">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#details">Details</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">My details <b class="caret"></b></a>
            <ul class="dropdown-menu" id="details-dropdown">
              <li role="presentation" class="active"><a href="#myabout" data-toggle="tab" role="tab">About</a></li>
              <li role="presentation"><a href="#myprofile" data-toggle="tab" role="tab">Profile</a></li>
              <li role="presentation"><a href="#mymessage" data-toggle="tab" role="tab">Messages</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12" id="home">
        <div class="jumbotron form-group">
          <h1>Hello, world!</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
      </div>
      <div class="col-md-12" id="details">
        <div class="page-header">
          <h1>Details</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
        <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
      </div>
      <div class="col-md-12">
        <h1>My details</h1>
        <ul role="tablist" class="nav nav-tabs" id="details-menu">
          <li role="presentation" class="active"><a href="#myabout" data-toggle="tab" role="tab">About</a></li>
          <li role="presentation"><a href="#myprofile" data-toggle="tab" role="tab">Profile</a></li>
          <li role="presentation"><a href="#mymessage" data-toggle="tab" role="tab">Messages</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="myabout">
            <h1>About</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
          </div>
          <div role="tabpanel" class="tab-pane" id="myprofile">
            <h2>Profile</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
          </div>
          <div role="tabpanel" class="tab-pane" id="mymessage">
            <h2>Message</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

页面跳转是由于正在更新的页面上的哈希位置。

通常会发生什么（如Home和Details）：

您点击了链接
浏览器会将链接带到您的任何位置。如果它是同一页面，则不必进行另一次网络呼叫。
网址栏应显示新位置
如果地址有片段标识符，那么浏览器将尝试查找具有该ID的元素并滚动到该位置。

由于Bootstrap自动连接选项卡，因此它不会将新哈希输出到地址，假设您仅将其用于选项卡。

要解决此问题，因为您无论如何都在处理点击，您只需添加以下行，即可使用哈希更新窗口位置：

window.location = this.hash;

要给javascript时间切换新标签，请像这样使用setTimeout：

var location = this.href
setTimeout(function() {
    window.location = location;
}, 5);

Here's a Demo in Plunker

您可以在外部窗口中打开并查看地址更改以帮助调试

另见：How can I scroll to a specific location on the page using jquery?

bootstrap ScrollSpy在单击下拉菜单项时不跳转到div

1 个答案:

Here's a Demo in Plunker