jquery - Bootstrap 选项卡事件状态在 ScrollSpy 中不起作用

Question

导航下拉列表项上的事件状态不工作我的详细信息。

是否有任何选项可以修复两者？

演示 http://codepen.io/anon/pen/vOyZGq

<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"/>
<div data-spy="scroll" data-target="#mynav" style="padding-top:70px;" data-offset="100">
    <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">
                  <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">
                  <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>
 </div>

Answer 1

你应该像这样添加一些事件。

$('.dropdown-menu li a').on('click', function (e) {
    $('.nav-tabs li').removeClass('active');
    $('.nav-tabs li a[href="' + $(e.target).attr('href') + '"]').parent().addClass('active');
});
$('.nav-tabs').on('shown.bs.tab', function (e) {
    $('.dropdown-menu li.active').removeClass('active');
     $('.dropdown-menu li a[href="' + $(e.target).attr('href') + '"]').parent().addClass('active');
});