左侧菜单
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
.menu{
height: 500px;
width: 20%;
background-color: gainsboro;
text-align: center;
float: left;
}
.content{
height: 500px;
width: 80%;
background-color: darkgray;
float: left;
}
.title{
line-height: 50px;
background-color: wheat;
color: rebeccapurple;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery.min.js"></script>
<script>
$(".item .title").mouseover(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
// $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
View Code
Tab切换
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 20px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
text-align: center;
}
.menu li{
display: inline-block;
margin-left: 14px;
padding:5px 20px;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: #2868c8;
color: white;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li relation="c1" class="current">菜单一</li>
<li relation="c2" >菜单二</li>
<li relation="c3">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
$(".menu li").click(function(){
var index=$(this).attr("relation");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(this).addClass("current").siblings().removeClass("current");
});
</script>
</html>
View Code
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>全选</button>
<button>取消</button>
<button>反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
</table>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
if($(this).text()=="全选"){ // $(this)代指当前点击标签
$("table :checkbox").prop("checked",true)
}
else if($(this).text()=="取消"){
$("table :checkbox").prop("checked",false)
}
else {
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}
});
</script>
</body>
</html>