码迷,mamicode.com
首页 > Web开发 > 详细

利用jQuery实现Tab选项卡

时间:2018-02-09 14:57:33      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:isp   pad   use   line   charset   获取   char   his   margin   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
{
margin: 0px;
padding: 0px;
font-family: 微软雅黑;
}
.menu{
height: 50px;
background: #272822;
}
.menu a{
display: block;
height: 50px;
width: 80px;
color: #fff;
float: left;
line-height: 50px;
text-decoration: none;
font-size: 20px;
/
border: 1px solid red;*/
text-align: center;
}
.menu a:first-child{
background: #888;
}
.info{
height: 200px;
color: #fff;
background: #888;
overflow: hidden;
}
.info p{
padding: 20px;
line-height: 30px;
display: none;
}
.info p:first-child{
display: block; // 把第一个进行显示出来
}
</style>
<script src="jquery-1.8.3.js"></script>
</head>
<body>
<div class="menu">
<a href="">html</a>
<a href="">js</a>
<a href="">jQuery</a>
</div>
<div class="info">
<p>html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言</p>

    <p>js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言</p>

    <p>jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言</p>
</div>

</body>
<script type="text/javascript">
$(‘.menu a‘).mouseover(function(){
// 让其他的a标签的背景颜色都去掉
$(‘.menu a‘).css({‘background‘:‘#272822‘});
// 把当前的a标签的背景颜色改变
$(this).css({‘background‘:‘#888‘});
//获取索引
index=$(this).index(‘.menu a‘);
// 隐藏掉所有的p标签
$(‘.info p‘).hide();
// 显示出当前的p标签
$(‘.info p‘).eq(index).show();

});
</script>
</html>

利用jQuery实现Tab选项卡

标签:isp   pad   use   line   charset   获取   char   his   margin   

原文地址:http://blog.51cto.com/11871779/2070508

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!