Question

我正在尝试使我的导航栏可点击。例如，当用户点击数据时，数据网页会打开。但在我的代码中，我无法这样做。当我单击选项卡按钮时没有任何反应。有人可以帮助我，以便当我点击标签按钮显示内容时？注意我正在使用bootstrap nav-nav标签栏下面是我的代码： -

  <head>

      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="">

      <title>Sales</title>

      <!-- Bootstrap Core CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">

      <!-- Custom CSS -->
      <link href="css/shop-item.css" rel="stylesheet">


      <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">





  </head>

  <body>
  <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
    <li><a data-toggle="tab" href="persons/data.html"> data </a></li>
    <li><a data-toggle="tab" href="teams/teamI.html"> teams </a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
     <div class="container-fluid">

          <div class="row">

              <div id= "mapContainer" class="col-md-12">
                  <div id="map-canvas"></div>
              </div>
              <div id = "panelContainer" class="col-md-3 hidden">
               <div  id="right-panel"></div>
             </div>
          </div>

      </div>

      <!-- /.container -->

      <div class="container">

          <hr>



      </div>
    </div>


      <!-- /.container -->

      <!-- jQuery -->
      <script src="js/jquery.js"></script>

      <!-- Bootstrap Core JavaScript -->
      <script src="js/bootstrap.min.js"></script>




  </body>

  </html>

Answer 1

您可以使其更简单，如下所示。但是，如果您想将其他html加载到特定标签中，请使用jquery。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
    <li><a data-toggle="tab" href="#data"> data </a></li>
    <li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
     <div class="container">
       <h1>Home</h1>
     </div>
    </div>
     <div id="data" class="tab-pane fade in">
     <div class="container">
       <h1>Data</h1>
     </div>
    </div>
    <div id="teams" class="tab-pane fade in">
     <div class="container">
       <h1>Teams</h1>
     </div>
    </div>
  </div>

＆＃13;

更新：您还可以使用jQuery加载在选项卡中添加html 功能

代码如下所示：

<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
    <li><a data-toggle="tab" href="#data"> data </a></li>
    <li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
     <div class="container">
       <h1>Home</h1>
     </div>
    </div>
     <div id="data" class="tab-pane fade in">
     <div class="container">
       <h1>Data</h1>
     </div>
    </div>
    <div id="teams" class="tab-pane fade in">
     <div class="container">
       <h1>Teams</h1>
     </div>
    </div>
  </div>
 <script>
    $('#home').load('/home.html');
    $('#data').load('/data.html');
    $('#teams').load('/teams.html');
 </script>

如何使标签按钮可点击？

1 个答案: