Question

我正在关注这个教程http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp，但我所做的根本不起作用，我无法弄清楚为什么会这样。

    <section id="neighbourhood">
    <h1 style="text-decoration: underline"> Neighbourhood </h1>

    <div class="container">
    <div class="tabs">
<ul class="nav nav-tabs nav-justified" id="tabs">
    <li class="active"><a data-toggle="tab" onclick="Groceries()" href="#tab1">Groceries</a></li>
    <li id="rtab2"><a data-toggle="tab" href="#tab2" onclick="Cafes()">Cafes</a></li>
    <li id="rtab3"><a data-toggle="tab" href="#tab3">Restuarants</a></li>
    <li id="rtab4"><a data-toggle="tab" href="#tab4">Health clubs</a></li>
</ul>
    </div>

   <div class="tab-content">
<div  id="tab1" class="tab-pane fade in active">
    <tr>
        <td><h2>Metro</h2><br>
        <p> 2300 Yonge St</p></td>
        <td><h2>Sobeys</h2><br>
        <p>710 Mt Pleasant Rd</p></td>
        <td><h2>Marcheleo's Gourment Marketplace</h2><br>
        <p>181 Eglinton Ave E</p></td>
    </tr>
    <tr>
        <td><h2>Kenpik Bulk Shop</h2><br>
        <p>151 Manor Rd E</p></td>
        <td><h2>Summerhill Market</h2><br>
        <p>1054 Mt Pleasant Rd</p></td>
        <td><h2>Valu-Mart</h2><br>
        <p>1500 Bayview Ave</p></td>
    </tr>

</div>

<div id="tab2" class="tab-pane fade">
<tr>
        <td><h2>de Mello Palheta Coffee Roasters</h2><br>
        <p> 2489 Yonge St</p></td>
        <td><h2>La Bohème Café Patisserie</h2><br>
        <p>2481 Yonge St</p></td>
        <td><h2>Istanbul Cafe & Espresso Bar</h2><br>
        <p>174 Eglinton Ave</p></td>
    </tr>
    <tr>
        <td><h2>Rachel's Coffee house</h2><br>
        <p>2011 Yonge St</p></td>
        <td><h2>Himalayan Java</h2><br>
        <p>2552 Yonge St</p></td>
        <td><h2>Jules Café Patisserie</h2><br>
        <p>617 Mt Pleasant Rd</p></td>
    </tr>

</div>

<div id="tab3" class="tab-pane fade">
</div>

<div id="tab4" class="tab-pane fade">
</div>

 </div>

  <script>
    $(document).ready(function(){
    $(".nav-tabs a").click(function(){
    $(this).tab('show');
      });
     });
     </script>

这大部分只是本教程中示例的副本，只是使用我自己的自定义内容，但它根本不起作用，只是呈现为一堆div元素叠加在一起

Answer 1

这可能是因为你没有包含Bootstrap，这是一个CSS和Javascript库。尝试在HTML的<head>部分添加这些行：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Maybe this too --><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>

如何在页面中实现标签？

1 个答案: