jQuery klicken Sie auf Menü und zeigen/verbergen Divs

-3

Ich brauche Hilfe für die Lösung dieses Problems jQuery. Ich habe ein Menü mit Bootstrap erstellt, ich muss ein Div anzeigen, wenn Sie in einen Menüeintrag klicken, und andere ausblenden. Die Divs sind A B C, für Menüs A B C. Sie müssen im leeren Leerraum angezeigt werden.jQuery klicken Sie auf Menü und zeigen/verbergen Divs

enter image description here

<ul class="nav nav-pills nav-stacked"> 
    <li id="a-btn" class="active"><a href="#"><i class="glyphicon glyphicon-  dashboard"> </i>A</a></li> 
    <li id="b-btn"><a href="#"><i class="glyphicon glyphicon-cd"> </i>B</a></li> 
    <li id="c-btn"><a href="#"><i class="glyphicon glyphicon-facetime-video"> </i>C</a></li> 
</ul> 

<div id="a-div"></div> 
<div id="b-div"></div> 
<div id="c-div"></div>

Quelle

2016-09-11 Matias Valdiviezo

uns Zeigen Sie, was Sie versucht haben bisher – Endless

ja ive versucht, den ganzen Tag, .. das ist, warum ich kann das nicht lösen:/ –

Sie scheinen meinen Kommentar nicht zu verstehen. Zeig uns, was du den ganzen Tag versucht hast, um diese Divs zu tauschen, damit wir dir helfen können, zu beheben, was kaputt ist. Cuz gibt es zu viele Möglichkeiten, dies zu lösen mit jquery, vanila Javascript, CSS-only und die Macht der Boostraps Data-Toggle-Attribut – Endless

-1

ich dies mit meinem eigenen Code gelöst haben:

$(document).ready(function(){ 
$('#a-div').show(); 
$('#b-div').hide(); 
$('#c-div').hide(); 
$('#a-btn').click(function(){ 
$('#b-div').hide(); 
$('#c-div').hide(); 
$('#a-div').show(); 
}); 
$('#b-btn').click(function(){ 
$('#a-div').hide(); 
$('#c-div').hide(); 
$('#b-div').show(); 
}); 
$('#c-btn').click(function(){ 
$('#a-div').hide(); 
$('#b-div').hide(); 
$('#c-div').show(); 
}); 
});

Quelle

2016-09-12 00:51:26

bereits.

jQuery(function($){ 
 
    $("ul li").click(function(){ 
 
     var id = $(this).attr("id"); 
 
    
 
     $(".wrapper > div").removeClass("visible"); 
 
     $(".wrapper > div." + id).addClass("visible"); 
 
    }); 
 
});

ul{ 
 
    padding: 0; 
 
    margin-bottom: 10px; 
 
} 
 
ul li{ 
 
    cursor: pointer; 
 
    list-style: none; 
 
} 
 

 
ul li:hover{ 
 
    color: blue; 
 
} 
 

 
.wrapper > div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
} 
 
.wrapper > div.visible{ 
 
    display: block; 
 
} 
 
.wrapper > div.purple{ 
 
    background-color: purple; 
 
} 
 
.wrapper > div.green{ 
 
    background-color: green; 
 
} 
 
.wrapper > div.blue{ 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<ul> 
 
    <li id="purple">A</li> 
 
    <li id="green">B</li> 
 
    <li id="blue">C</li> 
 
</ul> 
 

 
<div class="wrapper"> 
 
    <div class="purple visible"></div> 
 
    <div class="green"></div> 
 
    <div class="blue"></div> 
 
</div>

Quelle

2016-09-11 18:31:29

jQuery klicken Sie auf Menü und zeigen/verbergen Divs

Antwort

Verwandte Themen