2016-05-23 20 views
0

Ich habe ein Problem mit der Aktivierung meiner Registerkarte Links, wenn Sie den Code versuchen, dass Sie sehen, wenn ich auf "Home" zum Beispiel es richtig aktivieren, aber wenn ich auf klicke „Menü 1“ nach diesem, „Home“ wird noch aktivieren und „Menü 1“ zu, so dass ich ein anderes Mal klicken Lage sein, auf „home“ nicht ...Bootstrap - Registerkarte mit Dropdown, Aktivierungsprobleme

<div class="container dropdown"> 
    <h2>Dynamic Tabs</h2> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Click to choose a channel<span class="caret"></span></a> 
    <ul class="dropdown-menu nav"> 
    <li><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div id="home" class="tab-pane"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

Antwort

0

Ok endlich habe ich alles! Niemand half, es nahm mir Zeit, aber ich lernte daraus:

$('input').val($(this).children().html());

So ist der endgültige Code ist:

<div class="container dropdown"> 
    <h2>Dynamic Tabs</h2> 
    <input autocomplete="off" class="form-control" autocomplete="off" type="string" min="1" placeholder="Choose a channel" id="channel"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Click to chose a menu<span class="caret"></span></a> 
    <ul class="dropdown-menu nav"> 
    <li><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div id="home" class="tab-pane"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

P ich es nur für den Fall jemand brauche die Antwort hinterlassen werden Fügen Sie die <script>:

$('.dropdown-menu li').click(function() { 
    $('li').removeClass('active'); 
    $('input').val($(this).children().html()); 
}) 
hinzu
0

nach harter Arbeit an es fand ich eine einfache Möglichkeit, es zu tun:

$('.dropdown-menu li').click(function() { 
    $('li').removeClass('active'); 
}) 

Habe ich nur noch diese Zeile <input class="form-control" autocomplete="off" type="string" min="1" placeholder="Choose a channel" id="channel">

und jetzt würde ich gerne wissen, ob es möglich ist, den Eingangswert auf dem 'h3' Tag des 'li' ausgewählt zu machen? So etwas Ähnliches:

$('input').val(this.val());

wird Mein Eingabewert „Menü 2“, wenn wir auf der Liste auf „Menü 2“ klicken. Danke fürs Helfen.