Question

如何创建一个链接，使其滚动到div，然后使#stocks处于活动状态，并从#desc中删除默认活动。

<a href="#wew#stocks" data-toggle="tab">In stock</a>
<div id="wew"></div>
<ul class="nav nav-tabs" id="tabs">
       <li class="active"><a data-toggle="tab" href="#desc" style="">Description</a></li>
       <li><a data-toggle="tab" id="stocks" href="#stocks">Available Items</a></li>
       <li><a data-toggle="tab" href="#user">Seller Details</a></li>
       <li><a data-toggle="tab"  href="#reviews" >Reviews <span class="badge" > 3</span> </a></li>                  
</ul>

问题是，一旦我点击了，我就无法从#desc中删除活动类在库存链接，并使标签#stocks活跃

Answer 1

你的意思是这样吗？

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body data-spy="scroll" data-target=".navbar" data-offset="50">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
              <li><a href="#section1">Section 1</a></li>
              <li><a href="#section2">Section 2</a></li>
              <li><a href="#section3">Section 3</a></li>
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#section41">Section 4-1</a></li>
                  <li><a href="#section42">Section 4-2</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>    

    <div id="section1" class="container-fluid">
      <h1>Section 1</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section2" class="container-fluid">
      <h1>Section 2</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section3" class="container-fluid">
      <h1>Section 3</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section41" class="container-fluid">
      <h1>Section 4 Submenu 1</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section42" class="container-fluid">
      <h1>Section 4 Submenu 2</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>

  </body>
</html>

＆＃13;

users

＆＃13;

来源：http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

Bootstrap选项卡处于活动状态

1 个答案: