javascript學習教程之---如何從一個tab切換到banner幻燈片的轉換

時間 2019-11-11

標籤 javascript 學習教程如何一個 tab 切換 banner 幻燈片轉換欄目 JavaScript 简体版

原文原文鏈接

一個簡單的tab切換代碼；javascript

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。