jq切换面板
程序员文章站
2022-03-12 19:57:50
适合新手学习,非常简单的jq切换面板 ......
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
ul {
list-style: none;
}
.navbar_item {
background-color: red;
float: left;
margin-left: 5px;
width: 50px;
height: 18px;
text-align: center;
color: white;
font-weight: 700;
}
.bar_item_on {
background-color: greenyellow;
border: 3px solid black;
}
.tab_panel div {
border: 1px solid black;
width: 400px;
height: 294px;
margin: 2px 2px;
float: left;
}
</style>
</head>
<body>
<ul>
<li class="navbar_item">1</li>
<li class="navbar_item">2</li>
<li class="navbar_item">3</li>
</ul>
<div style="clear: both; width:410px;height:300px;border:3px solid black" class="tab_panel">
<div>
面板1
</div>
<div>
面板2
</div>
<div>
面板3
</div>
</div>
</body>
</html>
<script>
$(function () {
$('.tab_panel>div').first().show().siblings().hide();
var aLi = $('.navbar_item');
aLi.on('click', function () {
$(this).addClass('bar_item_on').siblings().removeClass('bar_item_on');
var index = $(this).index();
$('.tab_panel>div').eq(index).show().siblings().hide();
});
});
</script>