您的位置：首页 > Web前端 > JQuery

使用jquery和css一步步建立选显卡内容区

2012-03-12 14:52 225 查看

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></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>

首先我们先要给style.css添加基本的属性：

body {
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>
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;
}

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> 最终的效果就出来了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航