Dieser Artikel teilt den spezifischen Code für Bootstrap mit, um den TAB -Tag -Switching -Effekt für Ihre Referenz zu realisieren. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> <link rel = "styleSheet" href = "css/bootstrap.min.cs type="text/javascript" src="js/bootstrap.min.js" ></script> </head> <body> <nav role="navigation"> <div> <div> <button data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> <a href = "#"> <img src = "img/logo.jpg" style = "height: 50px; margin -top: -15px; href = "#"> Produkt </a> </li> <li> <a href = "#"> data-toggle = "Dropdown"> Services <span> </span> </a> <ul> <li> <a href = "#"> Online-Kundendienst "#"#"#"#"> fAl> <li> <a href =" <li><a href="#">Address Phone</a></li> </li> </li> </li> <li><a href="#">Mall</a></li> </ul> <div> <a href="#">Login</a> <a href="#">Register</a> <input type="text" placeholder="Please enter keywords"/> <butth> suche </button> </div> </div> </nav> <div style = "height: 60px;"> </div> <div> <div> <ul id = "mytab"> <li> <a href = "#xw1" data-toggle = 'tab'> news1 </a> </li> <li> <li> <a. a href = "#xw2"#xw2 " data-toggle='tab'>News2</a> </li> </ul> <div> <div id="xw1"> <p><a href="#">Illustrated TPP Moments: There has always been something that has not been confessed in the United States (picture)</a><span>2015-10-6</span></p> <p><a href="#">Illustrated TPP Moments: There has always war etwas, das in den Vereinigten Staaten (Bild) nicht gestanden wurde. Etwas, das in den Vereinigten Staaten nicht gestanden wurde (Bild) </a> <span> 2015-10-6 </span> </p> </div> <div id = "xw2"> <p> <a href = "#"> illustrierte TPP-Momente: In den Vereinigten Staaten (Picture) <place> <Place> 2015-10-5 </po.pl. HREF = "#"> Illustrierte TPP-Momente: In den USA wurde in den USA nicht gestanden (Bild) </a> <span> 2015-10-6 </span> </p> <p> <a href = "#"> Illustrated TPP Momente: Es gab etwas, das in den Vereinigten Staaten nicht gestreut wurde (picture). </div> </div> <div> <ul> <li> <a href = "#"> Best Practice 1 </a> </li> <li> <a href = "#"> Best Practice 2 </a> </li> <li> <a href = "#"> Best Practice 3 </li> </div> </div> </div> <img> <img <h3> <a> Bootstrap </a> </h3> <p> Dies ist ein kurzer erklärender Text für die obige Anwendung. </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> Bootstrap </a> </h3> <p> Dies ist ein kurzer erklärender Text für die obige Anwendung. </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> Bootstrap </a> </h3> <p> Dies ist ein kurzer erklärender Text für die obige Anwendung. </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> Bootstrap </a> </h3> <p> Dies ist ein kurzer erklärender Text für die obige Anwendung. </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> Bootstrap </a> </h3> <p> Dies ist ein kurzer erklärender Text für die obige Anwendung. </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> Bootstrap </a> </h3> <p> Dies ist ein kurzer erklärender Text für die obige Anwendung. </p> </div> </div> <div> <div> <h3> Dies ist eine neue Entwicklungsmethode für html5 </h3> </div> <p> Look Look </p> </div> </div> </div> </div> </div> <script> // $ ('#mytab a [href = "#xw2"]. //#$ ('#mytab a: last'). tab ('show'); $ ('#mytab a: eq (1)'). tab ('show') </script> </body> </html>Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, Bootstrap -Programme zu lernen.