Jquery 实现Tab效果 思路是js思路
Jquery 实现Tab效果 思路是js思路
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:.tab{background-color:#FAFAFA;margin:5px8px;padding:5px10px;}...

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>

<style type="text/css">

.tab

{

background-color: #FAFAFA;

margin: 5px 8px;

padding: 5px 10px;

}

.tab p span

{

background-color: #EFEFEF;

border: 1px solid #CCCCCC;

cursor: pointer;

margin-right: 6px;

padding: 2px 5px;

}

.tab p span.current

{

background-color: #FAFAFA;

border-bottom-color: #fafafa;

}

.tab p

{

border-bottom: 1px solid #CCCCCC;

font-weight: bold;

padding: 0 10px 2px;

}

.tab li

{

border-bottom: 1px dotted #CCCCCC;

padding-bottom: 3px;

margin: 5px 0;

}

.tab .mhot, .tab.allhot

{

display: none;

}

</style>

<script type="text/javascript">

$(document).ready(function() {

$(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式

$(".tab ul:not(:first)").hide(); //隐藏其它的UL

$(".tab span").mouseover(function() {

$(".tab span").removeClass("current"); //去掉所有SPAN的样式

$(this).addClass("current");

$(".tab ul").hide();

$("." + $(this).attr("id")).fadeIn('slow');

});

});

</script>

</head>

<body>

<div>

<p>

<span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span></p>

<ul>

<li>查字典教程网</li><li>www.jb51.net</li><li>我和我</li></ul>

<ul>

<li>一花一世办</li><li>一草一天堂</li></ul>

<ul>

<li>阿里巴巴</li><li>阿里巴巴</li><li>一草一天堂</li><li>我和我的祖国</li><li>最爱的地方</li></ul>

</div>

</body>

</html>

演示代码 http://demo.jb51.net/js/jquery_tab/index.htm

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类