Bootstrap Navbar mit Registerkarte Links funktioniert nicht

Hier ist die Frage. Der Inhalt von Home link wird standardmäßig angezeigt. aber wenn ich auf den Link wie Über uns oder Kontaktieren Sie uns nicht zeigen. Hier ist der Bootstrap-Code, den ich benutzt habe. Bitte sagen Sie mir, wie Sie die Links in Navbar anzeigen können.Bootstrap Navbar mit Registerkarte Links funktioniert nicht

<!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>

Quelle

2017-03-18 user3903517

Verwenden Sie Jquery, um dies zu tun – Abi

verwenden kann

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

Dann rufen Sie diese Methode geholfen werden, wenn die

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

Quelle

2017-03-18 08:06:41 Abi

Verwenden data-toggle=tab in den Links mit navbar Link klicken.

<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

Quelle

2017-03-18 08:30:42 ZimSystem

Ich habe Daten-Toggle = "Tab" in allen <a> Tags und es funktionierte ohne 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>

Quelle

2017-03-18 08:36:43 user3903517

Ja, das habe ich bereits beantwortet. – ZimSystem

Bootstrap Navbar mit Registerkarte Links funktioniert nicht

Antwort

Verwandte Themen