形式一
圖片2.png
思路：
1、給每個(gè)菜單的第一個(gè)元素（收藏夾、庫(kù)...）綁定單擊事件
2、單擊事件要做什么事情
找到當(dāng)前所有的兄弟元素都都批量顯示和隱藏間進(jìn)行切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='./jquery.js'></script>
<style type="text/css">
dt{color: red;width: 80px;}
</style>
</head>
<body>
<dl>
<dt>收藏夾</dt>
<dd>2345下載</dd>
<dd>桌面</dd>
</dl>
<dl>
<dt>庫(kù)</dt>
<dd>視頻</dd>
<dd>圖片</dd>
<dd>文檔</dd>
<dd>迅雷下載</dd>
<dd>音樂</dd>
</dl>
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>C盤</dd>
<dd>D盤</dd>
<dd>E盤</dd>
</dl>
</body>
<script type="text/javascript">
//給dl下面名為dt子元素綁定單擊事件
$("dl > dt").click(function(){
//console.log($(this).html()); //當(dāng)前點(diǎn)擊元素的dt
//方式一：找到當(dāng)前元素名為dd的所有的兄弟,都批量執(zhí)行顯示和隱藏切換的方法
//$(this).siblings('dd').slideToggle();
//方式二： 找到當(dāng)前元素的父元素，找到父下面名為dd的子元素，都批量執(zhí)行顯示和隱藏切換的方法
$(this).parent().children('dd').toggle();
});
</script>
</html>
形式二
圖片3.png
思路：
1、構(gòu)建html布局
2、給選項(xiàng)卡綁定單擊事件，單擊事件做的事情：
a、給當(dāng)前單擊的選項(xiàng)卡加一各高亮顯示顏色標(biāo)識(shí)，其他同級(jí)兄弟就要移除高亮顯示顏色標(biāo)識(shí)
b、找到下面對(duì)應(yīng)的選項(xiàng)卡的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='./jquery.js'></script>
<style type="text/css">
*{margin:0px;padding:0px;}
#header > span{width: 70px; background-color: #666;margin-right:30px;display: inline-block;}
#box > .content{
width: 277px;
height: 200px;
border:3px solid pink;
display: none;
}
#box > .selected{
display: block;
}
.native{
border-bottom:3px solid red;
}
</style>
</head>
<body>
<div id="header">
<span class="tab native">tab1</span>
<span class="tab">tab2</span>
<span class="tab">tab3</span>
</div>
<div id='box'>
<div class="content selected">tab1內(nèi)容</div>
<div class="content">tab2內(nèi)容</div>
<div class="content">tab3內(nèi)容</div>
</div>
</body>
<script type="text/javascript">
$(".tab").click(function(){
//給當(dāng)前元素添加native,并且同輩元素移除類名為native
$(this).addClass('native').siblings('.tab').removeClass('native');
//獲取到當(dāng)前的對(duì)象的下標(biāo)值
var index = $(this).index();
//找到對(duì)應(yīng)下標(biāo)index的類名為content，給加上類名selected,同輩要移除類名為selected
$(".content").eq(index).addClass('selected').siblings('.content').removeClass('selected');
//$(".content:eq("+index+")").addClass('selected').siblings('.content').removeClass('selected');
//$(".content").eq(index).addClass('selected').siblings('.selected').removeClass('selected');
});
</script>
</html>
