Question

我按照Twitter Bootstrap 2.3.2的文档介绍了如何实现Tab键。主页上有一个Carousel，基本上就是这样。当我单击下一个选项卡按钮时，我希望看到Carousel替换为测试文本。 onClick功能是可操作的，因为我可以看到网址更改为#about或#services等。任何建议的想法？

脚本调用：

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/bootswatch.less.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/index.js"></script> 


<body>
            <div class="container">
            <div class=masthead">
                <h3 href="#" class="text-muted"></h3>
                <div class="navbar navbar-center">
                    <div class="navbar-inner">
                        <div class="container">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-th-list"></span></a>
                        <div class="nav-collapse collapse">
                            <ul class="nav nav-tabs" id="myTab">
                                <li class="active"><a href="#home">Home</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>
                                <li><a href="#services">Services</a></li>
                                <li><a href="#staff">Our Staff</a></li>
                            </ul>
                        </div>
                        </div>
                    </div>
                </div>

       <div id='content' class="tab-content">
            <div class="tab-pane active" id="home">
                <div class="hero-unit">
                    <div id="myCarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" alt=""><img src="img/Banner.jpg" width = "100%"/></div>
                            <div class="item" alt=""><img src="img/autism1.jpg" width = "100%"/></div>
                            <div class="item" alt=""><img src="img/autism2.jpg" width = "100%"/></div>
                        </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span8">
                    <h3>How We Started</h3>
                        <p>Add information here.</p>
                    <h3>Our Goals</h3>
                        <p>Add nformation here.</p>
                    </div>
                </div>

            </div>
            <div class="tab-pane" id="about">
                <h3>About our company here!</h3>
            </div>
            <div class="tab-pane" id="contact">
            </div>
            <div class="tab-pane" id="services">
            </div>
            <div class="tab-pane" id="staff">
            </div>
        </div>

JS：

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

Twitter Bootstrap选项卡导航无法正常工作

0 个答案: