快捷導(dǎo)航

js實(shí)現(xiàn)簡潔的滑動(dòng)門菜單(選項(xiàng)卡)效果代碼

更新時(shí)間：2015年09月04日 12:21:35 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)簡潔的滑動(dòng)門菜單(選項(xiàng)卡)效果代碼,涉及javascript鼠標(biāo)事件操作頁面元素樣式切換的實(shí)現(xiàn)技巧,簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)簡潔的滑動(dòng)門菜單。分享給大家供大家參考。具體如下：

一個(gè)簡潔實(shí)用的網(wǎng)頁選項(xiàng)卡菜單，在同一個(gè)頁面中實(shí)現(xiàn)兩個(gè)選項(xiàng)卡，第一個(gè)是滑動(dòng)門，從布局上來說基本是相似的，第二個(gè)是選項(xiàng)卡，這里主要使用了Js自定義函數(shù)：tabMenu，函數(shù)功能：實(shí)現(xiàn)tab菜單，參數(shù)說明：tabMenu(tabBox,navClass);

參數(shù)一：tabBox（tab容器id）
參數(shù)二：navClass（當(dāng)前標(biāo)簽樣式class）
備注：依賴指定html結(jié)構(gòu)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-simple-scroll-menu-tab-codes/

具體代碼如下：

<!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>簡潔的選項(xiàng)卡菜單</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
ul,li{margin:0;padding:0;}
.tabBox{width:268px;margin:20px;}
ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}
ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;border-bottom:none;margin-right:5px;background:#fff;cursor:pointer;}
ul.tabTag li.active{border-color:#000;background:#eee;color:red;position:relative;top:1px;}
.tabCon{border:1px solid #000;border-top:none;background:#fff;}
.tCon{display:none;background:#eee;padding:25px;}
</style>
<script type="text/javascript"> 
 function tabMenu(tabBox,navClass){
  var tabNavLi=document.getElementById(tabBox).getElementsByTagName("ul")[0].getElementsByTagName("li");
  var tabCon=document.getElementById(tabBox).getElementsByTagName("div")[0].getElementsByTagName("div");
  var tabLens=tabCon.length;
  for(var i=0;i<tabLens;i++){
  //應(yīng)用js閉包傳入?yún)?shù)i作為當(dāng)前索引值賦值給m
   (function(m){
   tabNavLi[m].onmouseover = function(){
    for(var j=0; j<tabLens; j++){
     tabNavLi[j].className = (j==m)?navClass:"";
     tabCon[j].style.display = (j==m)?"block":"";
    }
   }
   })(i);
  }
 }
//函數(shù)調(diào)用
window.onload=function(){
 tabMenu("tabBox1","active");
 tabMenu("tabBox2","active");
}
</script>
</head>
<body>
<!--demo1-->
<div id="tabBox1" class="tabBox">
 <ul class="tabTag">
  <li class="active">新聞1</li>
  <li>體育1</li>
  <li>財(cái)經(jīng)1</li>
 </ul>
 <div class="tabCon">
  <div class="tCon" style="display:block">新聞1內(nèi)容</div>
  <div class="tCon">體育1內(nèi)容</div>
  <div class="tCon">財(cái)經(jīng)1內(nèi)容</div>
 </div>
</div>
<!--demo2-->
<div id="tabBox2" class="tabBox">
 <ul class="tabTag">
  <li class="active">新聞2</li>
  <li>體育2</li>
  <li>財(cái)經(jīng)2</li>
 </ul>
 <div class="tabCon">
  <div class="tCon" style="display:block">新聞2內(nèi)容</div>
  <div class="tCon">體育2內(nèi)容</div>
  <div class="tCon">財(cái)經(jīng)2內(nèi)容</div>
 </div>
</div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: