使用jquery和css一步步建立选显卡内容区
1.首先我们需要的是一个div框架，把我们的内容放在里面。里面有h3、lu、li标签。
<div>
<h3>这是一个选显卡</h3>
<div>
<ul>
<li>选卡1</li>
<li>选卡2</li>
<li>选卡3</li>
</ul>
<div>内容 1</div>
<div>内容 2</div>
<div>内容 3</div>
</div>
<h3>这是一个选显卡</h3>
<div>
<ul>
<li>选卡1</li>
<li>选卡2</li>
<li>选卡3</li>
</ul>
<div>内容 1</div>
<div>内容 2</div>
<div>内容 3</div>
</div>
</div>
2.为了使页面简介易看，在这我添加了css文件 style.css。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>使用jquery和css一步步建立选显卡内容区</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>使用jquery和css一步步建立选显卡内容区</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
首先我们先要给style.css添加基本的属性：
body {
background-color:#657077;
margin:40px;
}
background-color:#657077;
margin:40px;
}
3.这时我们需要添加css选择器，并在css中给予属性赋值
html 中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>使用jquery和css一步步建立选显卡内容区</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="boxs1" class="boxs">
<h3>这是一个选显卡</h3>
<div class="xk_title">
<ul class="xk">
<li><a href="#" title="content1" class="tab current">选卡1</a></li>
<li><a href="#" title="content2" class="tab">选卡2</a></li>
<li><a href="#" title="content3" class="tab">选卡3</a></li>
</ul>
<div id="content1" class="content" >内容 1内容 1内容 1内容 1</div>
<div id="content2" class="content" >内容 2内容 2内容 2内容 2内容 2</div>
<div id="content3" class="content" >内容 3内容 3内容 3内容 3内容 3</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>使用jquery和css一步步建立选显卡内容区</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="boxs1" class="boxs">
<h3>这是一个选显卡</h3>
<div class="xk_title">
<ul class="xk">
<li><a href="#" title="content1" class="tab current">选卡1</a></li>
<li><a href="#" title="content2" class="tab">选卡2</a></li>
<li><a href="#" title="content3" class="tab">选卡3</a></li>
</ul>
<div id="content1" class="content" >内容 1内容 1内容 1内容 1</div>
<div id="content2" class="content" >内容 2内容 2内容 2内容 2内容 2</div>
<div id="content3" class="content" >内容 3内容 3内容 3内容 3内容 3</div>
</div>
</body>
</html>
css中
body {
background-repeat:no-repeat;
background-position:top center;
background-color:#657077;
margin:40px;
}
.boxs{
margin:0 auto;
width:300px;
}
.boxs h3 {
font-size:23px;
color:#ffffff;
margin-bottom:10px;
}
.xk_title{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
ul.xk {
margin:0px;
padding:0px;
}
ul.xk li{
list-style:none;
display:inline;
}
ul.xk li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.xk li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.xk li a.current {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
}
#content2, #content3 { display:none; }
ul.xk {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:8px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
background-repeat:no-repeat;
background-position:top center;
background-color:#657077;
margin:40px;
}
.boxs{
margin:0 auto;
width:300px;
}
.boxs h3 {
font-size:23px;
color:#ffffff;
margin-bottom:10px;
}
.xk_title{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
ul.xk {
margin:0px;
padding:0px;
}
ul.xk li{
list-style:none;
display:inline;
}
ul.xk li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.xk li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.xk li a.current {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
}
#content2, #content3 { display:none; }
ul.xk {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:8px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
4.到jquery官方网站下载最新的js文件，并导入到html文件中：
<script src="jquery.js"></script>
<script >
//当页面加载时执行
$(document).ready(function(){
//点击 a 连接时
$("a.tab").click(function(){
// 找到.current并清除
$(".current").removeClass("current");
//然后在赋值
$(this).addClass("current");
//所以的内容 滑动效果 收起来
$(".content").slideUp();
// 定义一个变量，并赋予它点击时本身滑动展开
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<script >
//当页面加载时执行
$(document).ready(function(){
//点击 a 连接时
$("a.tab").click(function(){
// 找到.current并清除
$(".current").removeClass("current");
//然后在赋值
$(this).addClass("current");
//所以的内容 滑动效果 收起来
$(".content").slideUp();
// 定义一个变量，并赋予它点击时本身滑动展开
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
最终的效果就出来了。
