1. 首頁
  2. 問答
  3. Bootstrap標籤有效

Bootstrap標籤有效

2016-01-17 55 views
-1

我該如何創建一個鏈接，使其滾動到div，然後使
#stocks處於活動狀態，並從#desc中刪除默認活動。Bootstrap標籤有效

<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活躍

來源

2016-01-17 Jonas Dulay

回答

0

你的意思是這樣的？

body { 
 
    position: relative; 
 
} 
 
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
 
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
 
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
 
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
 
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
<!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>

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

來源

2016-01-17 14:55:47

相關問題

 相關問題