摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-sca
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>練習(xí)系jQuery</title>
<style>
*{
padding: 0;
margin: 0;
}
#stbox,
#stbox1,
#stbox2,
#stbox3 {
width: 100%;
height: 2.25rem;
background:cadetblue;
font-size: 0.24rem;
text-align: center;
line-height: 2.25rem;
border-bottom: 1px solid #FFFFFF;
}
#mainBox,
#mainBox1,
#mainBox2,
#mainBox3 {
width: 100%;
height: 9.55rem;
font-size: 0.24rem;
display: none;
border: 1px solid #CCCCCC;
}
.TabBox{
width: 60%;
height: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="TabBox">
<div id="stbox">New1</div>
<div id="mainBox">內(nèi)容1</div>
<div id="stbox1">New2</div>
<div id="mainBox1">內(nèi)容2</div>
<div id="stbox2">New3</div>
<div id="mainBox2">內(nèi)容3</div>
<div id="stbox3">New4</div>
<div id="mainBox3">內(nèi)容4</div>
</div>
<div class="pc-txt">layui-carousel</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#stbox").click(function() {
$("#mainBox").toggle(1000)
})
});
$(document).ready(function() {
$("#stbox1").click(function() {
$("#mainBox1").toggle(1000)
})
});
$(document).ready(function() {
$("#stbox2").click(function() {
$("#mainBox2").toggle(1000)
})
});
$(document).ready(function() {
$("#stbox3").click(function() {
$("#mainBox3").toggle(1000)
})
});
$(document).ready(function(){
$(".pc-txt").hover(
function(){
$(this).css('background','red')
},function(){
$(this).css('background','yellow')
}
)
})
</script>
<!--總結(jié)1：顯示與隱藏 show（）與hide（）以及兩者之間的toggle()-->
<!--總結(jié)2：淡入淡出fadeIn()與fadeOut()以及 fadeToggle()fadeTo()-->
<!--總結(jié)3：滑動與動畫中動話 animate()-->
</html>
