学习jQuery中slideUp、slideDown时做的一个小练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.10.2.js"></script>
<script>
$(function(){
$("ul li").click(
function(){
var i=$(this).index();
$(".box>div:not(.wrap)").not($(".wrap"+(i+1))).slideUp(300);
$(".wrap"+(i+1)).delay(300).slideDown(300);
}
)
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #121212;
}
.box{
width: 783px;
height: 385px;
margin: 20px auto 0;
overflow: hidden;
}
.wrap{
width: 759px;
border: 12px solid #2E2E2E;
border-bottom: none;
background-color: #0D0D0D;
margin:0;
overflow: hidden;
}
.title{
width: 759px;
height: 132px;
margin: 0 auto;
}
ul{
width: 730px;
height: 27px;
list-style: none;
margin: 0 auto;
background:url("images/nav_bar.jpg") repeat-x ;
}
li{
height: 27px;
float: left;
color: #ffffff;
line-height: 27px;
padding: 0 20px;
font-family: Arial;
font-size: 13px;
}
li:hover{
background: url("images/nav_bar_o.jpg") repeat-x;
}
h3{
color: #568945;
font-family: Arial;
}
p{
color: #686868;
font-family: Arial;
margin-top: 15px;
font-size: 14px;
}
.content1,.content2,.content3,.content4,.content5{
width: 730px ;
margin: 40px auto;
}
.content1 p:nth-child(1){
margin-top: 15px;
}
.content3 p,.content5 p{
width: 620px;
float: left;
}
.wrap1,.wrap2,.wrap3,.wrap4,.wrap5{
width: 759px;
background-color: #0D0D0D;
/*height: 200px;*/
border: 12px solid #2E2E2E;
border-top: none;
margin: 0 auto;
overflow: hidden;
}
.content2,.content3,.content4,.content5{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap">
<div class="title">
<img src="images/header.jpg">
</div>
<ul>
<li>Welcome</li>
<li>About</li>
<li>JQuery</li>
<li>Contact</li>
<li>Terms</li>
</ul>
</div>
<div class="wrap1">
<div class="content1">
<h3>Welcome</h3>
<p>Hi, welcome to the demonstration for the NETTUTS tutorial - "How to Load In and Animate Content with jQuery"</p>
<p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome effects...</p>
</div>
</div>
<div class="wrap2">
<div class="content2">
<h3>About Us</h3>
<p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis. </p>
</div>
</div>
<div class="wrap3">
<div class="content3">
<h3>Portfolio</h3>
<p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis.</p>
<img src="images/flame.jpg">
</div>
</div>
<div class="wrap4">
<div class="content4">
<h3>Contact Us</h3>
<p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis. </p>
</div>
</div>
<div class="wrap5">
<div class="content5">
<h3>Our Terms</h3>
<p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis.</p>
<img src="images/bin.jpg">
</div>
</div>
</div>
</body>
</html>
2213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
