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

javascript学习教程之---如何从一个tab切换到banner幻灯片的转换

2013-10-15 22:17 381 查看

一个简单的tab切换代码；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<style type="text/css">
#nav_list{height:25px; width:300px;}
#nav_list div{ float:left; width:100px; line-height:25px; background:#666; text-align:center;}
#nav_list div.cur{ background:#C63; color:#fff;}
#nav_con{ width:298px; height:200px; border:solid 1px #999;}
#nav_con div{ display:none;}
</style>
<div id="nav_list">
<div class="cur">nav1</div>
<div>nav2</div>
<div>nav3</div>
</div>
<div id="nav_con">
<div style="display:block">tab1tab1tab1tab1tab1tab1tab1</div>
<div>tab2tab2tab2tab2tab2tab2tab2</div>
<div>tab3tab3tab3tab3tab3tab3tab3</div>
</div>
<script type="text/javascript">
$("#nav_list div").hover(function(){//如果想点击再切换的话把hover改成click
$(this).addClass('cur').siblings().removeClass('cur');//鼠标滑过时给当前的div添加class
var $index = $("#nav_list div").index(this);//获取当前的索引值
$("#nav_con div").eq($index).show().siblings().hide();//tab内容等于当前鼠标滑过的索引值时，显示对应的内容
return true;
},function(){
return false;//鼠标离开执行的操作，返回一个flase
});
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航