Question

这是一个问题。 Home链接的内容默认显示。但当我点击关于我们或联系我们的链接时，请不要显示。这是我使用的bootstrap代码。请告诉我如何在导航栏中显示链接。

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Savitasoft</title>
        <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
        </script>
        <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <style>

        </style>
      </head>
    <body>

        <nav role="navigation" class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="pull-left" href="#"> 
                <img class="img-responsive" alt="Brand" src="bootstrap-3.3.7-dist/images/test.png"></img>
              </a>
              <button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#menu" >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="menu">
              <ul class="nav navbar-nav">
                <li class="active"> <a href="#Home">Home</a></li>
                <li> <a href="#Services">Services</a></li>
                <li> <a href="#About_us">About us</a></li>
                <li> <a href="#Contact_us">Contact us</a></li>
              </ul>
            </div>
          </div>
        </nav>

      <div class="tab-content" >
        <div id="Home" class="tab-pane fade in active">
           <p>These are the contents of Home </p>
        </div>
        <div id="Services" class="tab-pane fade">
           <p>These are the contents of Services </p>
        </div>
        <div id="About_us" class="tab-pane fade">
           <p>These are the contents of About us </p>
        </div>
        <div id="Contact_us" class="tab-pane fade">
           <p>These are the contents of Contact us </p>
        </div>
      </div>
    </body>
    </html>

Answer 1

在链接中使用data-toggle=tab。

<div class="collapse navbar-collapse" id="menu">
      <ul class="nav navbar-nav">
         <li class="active"> <a href="#Home" data-toggle="tab">Home</a></li>
         <li> <a href="#Services" data-toggle="tab">Services</a></li>
         <li> <a href="#About_us" data-toggle="tab">About us</a></li>
         <li> <a href="#Contact_us" data-toggle="tab">Contact us</a></li>
      </ul>
</div>

http://www.codeply.com/go/KMm35WHGZR

Answer 2

使用此功能可能会有所帮助

<script>
   //Functon to show divs from the nav menu
    function show_div(toShow)
    {
       var show = document.getElementById(toShow);
       show.style.display = "";
    }
</script>

然后在使用

单击导航栏链接时调用此方法

 <a href="#" onclick="show_div('home');"></a>

Answer 3

我添加了data-toggle =＆＃34; tab＆＃34;在所有<a>标签中，它没有jquery。

<ul class="nav navbar-nav">
          <li class="active"> <a href="#Home" data-toggle="tab" >Home</a></li>
          <li> <a href="#Services" data-toggle="tab" >Services</a></li>
          <li> <a href="#About_us" data-toggle="tab" >About us</a></li>
          <li> <a href="#Contact_us" data-toggle="tab">Contact us</a></li>
        </ul>

带有标签链接的Bootstrap导航栏无效

3 个答案: