jquery --- 网页选项卡

在这里插入图片描述

点击,不同的tab_menu,显示不同的tab_box

注意点:
1.获取ul下,当前li的编号. $(‘div ul li’).index(this)
2.显示ul下编号为$index的li -> $(‘ul li’).eq($index)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tab{border:1px solid black;border-radius: 10px;padding: 15px;width: 230px;
}
.hide{display: none;
}
.selected{background: #ffa
}
li{display: inline-block;border-left: 1px solid black;padding: 5px;
}
li:hover{cursor: pointer;
}
.tab_box{padding: 5px;border: 1px solid black;border-radius: 5px;width: 200px;height: 100px;
}
</style>
</head>
<body><div class="tab"><div class="tab_menu"><ul><li class="selected">时事</li><li >体育</li><li >娱乐</li></ul></div><div class="tab_box"><div>时事</div><div class="hide">体育</div><div class="hide">娱乐</div></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){$('div.tab_menu li').click(function(){$(this).addClass('selected').siblings().removeClass("selected")let $index = $('div.tab ul li').index(this)$('div.tab_box >div').eq($index).show().siblings().hide()})
})</script></body>
</html>

参考《锋利的jQuery》(第2版)P166~P167

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/250952.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！