jQueryメニューを表示してdivを表示/非表示

Question

このjQueryの問題を解決するには、助けが必要です。私はブートストラップで作られたメニューを持っている、私はメニュー項目をクリックするとdivを表示し、他のものを非表示にする必要があります。 divsはメニューA B CのA B Cです。空白の空白に表示する必要があります。

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

Answer 1

私は自分自身のコードを使用して、これを解決した：

$(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(); 
}); 
}); 

Answer 2

これを試してみてください。

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>