動畫效果 詳情請看 jQuery api 動畫收放 slideUp slideDown 通過id class 來設置 jQuery實現效果
阿新 • • 發佈：2017-07-05
color ada htm border order style borde query list
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#boss{
margin:auto ;
width: 500px;
background-color:#C48698;
border: 2px;
}
#boss ul li {
list-style: none;
}
#boss ul li div {
display: none;
height: 500px;
/**/
}
p{
margin-top: 2px;
width: 500px;
height:50px;
background-color:#f9f9f9;
border:2px #4eac30;
}
</style>
<script src="jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="boss" >
<ul id="ul">
<li>
<p class="p1"> </p>
<div id="div1" class="sjb"></div>
</li>
<li>
<p class="p2"> </p>
<div id="div2" class="sjb"></div>
</li>
<li>
<p class="p3"> </p>
<div id="div3" class="sjb"></div>
</li>
</ul>
</div>
<script>
$(‘.p1‘).click(function(){
$(‘.sjb‘).slideUp();
$("#div1").slideDown();
$("#div1").css({
backgroundColor:‘#79ADA5‘
});
});
$(‘.p2‘).click(function(){
$(‘.sjb‘).slideUp();
$("#div2").slideDown();
$("#div2").css({
backgroundColor:‘#2C677E‘
});
});
$(‘.p3‘).click(function(){
$(‘.sjb‘).slideUp();
$("#div3").slideDown();
$("#div3").css({
background:‘#29315D‘
});
});
</script>
</body>
</html>
動畫效果 詳情請看 jQuery api 動畫收放 slideUp slideDown 通過id class 來設置 jQuery實現效果