在Bootstrap中使用.in类在选项卡中淡入淡出。
您可以尝试运行以下代码以淡入淡出标签页-
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "container"> <h2>Tutorials Website</h2> <p>The following is our learning content:</p> <ul class = "nav nav-tabs"> <li class="active"><a data-toggle = "tab" href = "#home">Home</a></li> <li><a data-toggle = "tab" href = "#two">About</a></li> <li><a data-toggle = "tab" href = "#three">Product</a></li> </ul> <div class = "tab-content"> <div id = "home" class="tab-pane in active"> <h2>Home</h2> <p>This is demo text!</p> </div> <div id = "two" class="tab-pane fade"> <h2>About</h2> <p>This is demo text!</p> </div> <div id = "three" class="tab-pane fade"> <h2>Product</h2> <p>This is demo text!</p> </div> </div> </div> </body> </html>