形式一
图片2.png
思路：
1、给每个菜单的第一个元素（收藏夹、库...）绑定单击事件
2、单击事件要做什么事情
找到当前所有的兄弟元素都都批量显示和隐藏间进行切换
<!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>库</dt>
<dd>视频</dd>
<dd>图片</dd>
<dd>文档</dd>
<dd>迅雷下载</dd>
<dd>音乐</dd>
</dl>
<dl>
<dt>计算机</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()); //当前点击元素的dt
//方式一：找到当前元素名为dd的所有的兄弟,都批量执行显示和隐藏切换的方法
//$(this).siblings('dd').slideToggle();
//方式二： 找到当前元素的父元素，找到父下面名为dd的子元素，都批量执行显示和隐藏切换的方法
$(this).parent().children('dd').toggle();
});
</script>
</html>
形式二
图片3.png
思路：
1、构建html布局
2、给选项卡绑定单击事件，单击事件做的事情：
a、给当前单击的选项卡加一各高亮显示颜色标识，其他同级兄弟就要移除高亮显示颜色标识
b、找到下面对应的选项卡的内容
<!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内容</div>
<div class="content">tab2内容</div>
<div class="content">tab3内容</div>
</div>
</body>
<script type="text/javascript">
$(".tab").click(function(){
//给当前元素添加native,并且同辈元素移除类名为native
$(this).addClass('native').siblings('.tab').removeClass('native');
//获取到当前的对象的下标值
var index = $(this).index();
//找到对应下标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>
网友评论