Bootstrap Tabs oder Alternativen?

-1

Ist es möglich, Tabs wie bootstrap .nav-tabs zu haben, aber anstelle eines Anchor-Tags wird der Inhalt darunter geändert?Bootstrap Tabs oder Alternativen?

Im Suche nach so etwas wie diese:

<ul class="nav nav-tabs"> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li><a href="#">Menu 1</a></li> 
 
    <li><a href="#">Menu 2</a></li> 
 
    <li><a href="#">Menu 3</a></li> 
 
</ul>

Aber ohne die Anker-Tags, sondern wird nur die aktiven Registerkarte ändern und den Inhalt unten ändern.

Wenn Bootstrap nicht die beste Option ist lassen Sie mich wissen

Quelle

2017-07-04 ThatPurpleGuy

ich auch Ihre Frage nicht verstanden. Sie möchten eine dynamische Tab-Änderung? Bootstrap bietet das, http://getbootstrap.com/javascript/#tabs. Mit ihrem Javascript lib. – Pimptech

Sie Taste statt Anker verwenden können. Sie müssen auf etwas klicken, um das Menü zu ändern. Bootstrap hat auch Nav-Pills-Klasse, die für Menü arbeiten. Andernfalls können Sie div anstelle von anchor-Tags erstellen und jquery schreiben, um Inhalt auszublenden oder anzuzeigen. Um die aktive Registerkarte anzuzeigen, können Sie die Klasse .active aus allen anderen divs entfernen und sie zur aktuellen hinzufügen.

Bootstrap für Tabs ist eine sehr einfach zu folgen Option. Bleiben Sie dabei, wenn keine anderen spezifischen Projektanforderungen bestehen. Zu Lernzwecken können Sie auch die zurb-Stiftung ausprobieren. Es ist auch ein sehr guter Rahmen.

Quelle

2017-07-04 04:24:49 Amit

<meta charset="UTF-8"> 
 
    <meta name="viewport" 
 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <!--<link href="CSS/bootstrap.css" rel="stylesheet">--> 
 
    <link rel="stylesheet" href="CSS/style.css"> 
 
    <title>Template</title> 
 
</head> 
 
<body> 
 
<ul class="nav nav-tabs"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#" id="1">Menu 1</a> 
 
    <div class="1"> 
 
     <h1>test</h1> 
 
    </div> 
 
    </li> 
 
    <li><a href="#" id="2">Menu 2</a> 
 
    <div class="2"> 
 
     <h1>test</h1> 
 
    </div> 
 
    </li> 
 
    <li><a href="#" id="3">Menu 3</a> 
 
     <div class="3"> 
 
      <h1>test</h1> 
 
     </div> 
 
    </li> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $(function() { 
 
     $('.2, .3') 
 
      .hide(); 
 
    }); 
 
    $(document).ready(function(){ 
 
     $("#1").click(function(){ 
 
      $(".2, .3").hide(); 
 
      $(".1").show(); 
 
     }); 
 
     $("#2").click(function(){ 
 
      $(".1, .3").hide(); 
 
      $(".2").show(); 
 
     }); 
 
     $("#3").click(function(){ 
 
      $(".2, .1").hide(); 
 
      $(".3").show(); 
 
     }); 
 
    });

Thx diesen Code am Ende mit @amit

Quelle

2017-07-04 04:40:41 ThatPurpleGuy

Bootstrap Tabs oder Alternativen?

Antwort

Verwandte Themen