bootstrap之Tab选项卡


<html>
<head>
   <meta charset="utf-8">
    <title>Tab选项卡title>
     
     <link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css">
     <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <link href="dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
     <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
     <script type="text/javascript" src="js/tests/vendor/jquery.min.js">script>
     <script type="text/javascript" src="dist/bootstrap.js">script>
     <script type="text/javascript" src="dist/bootstrap.min.js">script>
     <script type="text/javascript" src="dist/npm.js">script>
     <script type="text/javascript" src="js/tab.js">script>

head>
<body>
 <ul class="nav nav-tabs" id="myTab">
    <li><a href="#home" data-toggle="tab">首页a>li>
    <li><a href="#about" data-toggle="tab">关于a>li>
    <li><a href="#contact" data-toggle="tab">联系a>li>
 ul>
<div class="tab-content">

<div  class="tab-pane active" id="home">
home
div>
<div id="about" class="tab-pane">
about
div>
<div id="contact" class="tab-pane">
contact
div>
div>
body>
html>
<script type="text/javascript">

    /*启用选项卡*/
    $("#myTab a").click(function(e){
       e.preventDefault();/*不要执行与事件有关的默认动作*/
      $(this).tab('show');

    })

script>

你可能感兴趣的:(BootStrap)