点击按钮切换内容【html+css3+jquery 点击按钮切换内容】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击按钮切换内容</title>
</head>
<body>
<div>
<ul>
<li>按钮一</li>
<li>按钮二</li>
<li>按钮三</li>
</ul>
</div>
<div>
<div>内容一内容一内容一</div>
<div>内容二</div>
<div>内容三内容三内容三内容三内容三内容三内容三</div>
</div>
<style type="text/css">
.lt_tab-menu_switch ul{padding: 0;margin: 0;}
.lt_tab-menu_switch ul li{display: inline-block;width: 200px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;}
.lt_tab-menu_switch ul li.lt_button_menu{background: #749dcf;}
.lt_content_classify .lt_01_content{width: 600px;height: 300px;background: #F2F2F2;border: 1px solid #749dcf;;display: none;padding: 15px;}
.lt_content_classify .lt_01_content:first-child{display: block;}
</style>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/jinsom/LightSNS-CDN@1.6.83/assets/js/jquery.min.js?ver=1.6.64' id='jquery-js'></script>
<script type="text/javascript">
$(function () {
$('.lt_tab-menu_switch li').click(function () {
$(this).addClass('lt_button_menu').siblings().removeClass('lt_button_menu');
var index=$(this).index();
$(".lt_content_classify .lt_01_content").eq(index).show().siblings().hide();
})
})
</script>
</body>
</html>
隐藏内容需要登录才可以看见
登录
