快捷導(dǎo)航

JavaScript 封裝一個(gè)tab效果源碼分享

更新時(shí)間：2015年09月15日 12:12:21 投稿：mrr

本文給大家分享javascript封裝一個(gè)tab效果源碼分享，感興趣的朋友一起來看看吧

效果圖如下：

html代碼

<!DOCTYPE html>
<html>
<head>
<title>tab測(cè)試</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-" />
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tab-min.js"></script>
</head>
<body>
<div id="tab">
 <!-- tabHead -->
 <ul class="tab-nav">
 <li><a href="javascript:void()">交易安全</a></li>
 <li><a href="javascript:void()">淘寶大學(xué)</a></li>
 <li><a href="javascript:void()">愛心</a></li>
 </ul>
 <!-- tabPanel-->
 <ul class="tab-bd">
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>
<script type="text/javascript">
tabPanel({"panel":"tab"});//panel為必填項(xiàng)，default、defalutStyle、hoverStyle為選填項(xiàng)
</script>
</body>
</html>

js代碼

function tabPanel(param){
 var defaultIndex=param["default"]||,//設(shè)置顯示的頁面
 panelobj=param["panel"],//設(shè)置tab容器
 defalutClass=param["defalutStyle"]||"",//設(shè)置tab菜單項(xiàng)的普通樣式
 hoverClass=param["hoverStyle"]||"hover",//設(shè)置鼠標(biāo)移到tab菜單項(xiàng)的樣式
 currentIndex=defaultIndex,
 menus=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
 contents=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
 menuNumber=menus.length,
 hidden="hidden";
 for(var i=;i<menuNumber;i++){
 _setClass(contents[],hoverClass);
 _setClass(contents[i],hidden);
 _setClass(menus[i],defalutClass);
 (function(i){
 menus[i].onmouseover=function(){
 var old=menus[currentIndex];
 _setClass(old,defalutClass);
 _setClass(contents[currentIndex],hidden);
 var cur=menus[i];
 _setClass(cur,hoverClass);
 currentIndex=i;
 _setClass(contents[i],"");
 };
 })(i);
 }
 _setClass(menus[currentIndex],hoverClass);
 _setClass(contents[currentIndex],"");
 //便利函數(shù)
 function _setClass(obj,className){obj.className=className}
 function _$(oid){return typeof(oid) == "string"?document.getElementById(oid):oid}
}

css代碼

#tab{border:px solid #ccc;}
#tab .tab-bd{border-top:none;margin: auto;padding:px;text-align:left;height:px;position:relative}
.tab-nav{margin: auto;padding:;background:#eee;height:px;}
.tab-nav li{display:inline;list-style:none outside none;width:px;height:px;float:left;line-height:px;text-align:center;}
.tab-nav li a{color:#;display:inline-block}
.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#;display:block; }
.hidden{display:none}

您可能感興趣的文章:

相關(guān)文章

js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁換膚功能
這篇文章主要為大家詳細(xì)介紹了js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁換膚功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
前端實(shí)現(xiàn)監(jiān)控SDK的實(shí)戰(zhàn)指南
本文討論了前端監(jiān)控和數(shù)據(jù)統(tǒng)計(jì)的設(shè)計(jì)思路,包括錯(cuò)誤監(jiān)控、用戶行為日志、PV/UV統(tǒng)計(jì)等方面,介紹了數(shù)據(jù)采集、日志上報(bào)、日志查詢的流程,以及監(jiān)控錯(cuò)誤的類型和用戶埋點(diǎn)統(tǒng)計(jì)的手段,同時(shí)提到了PV和UV的統(tǒng)計(jì)方法,需要的朋友可以參考下
2024-10-10
原生JS封裝vue Tab切換效果
這篇文章主要為大家詳細(xì)介紹了原生JS封裝vue Tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
JavaScript學(xué)習(xí)筆記之惰性函數(shù)示例詳解
函數(shù)是js世界的一等公民，js的動(dòng)態(tài)性、易變性在函數(shù)的應(yīng)用上，體現(xiàn)的淋漓盡致。下面這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)筆記之惰性函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-08-08
javascript+html5+css3自定義提示窗口
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義提示窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JavaScript使用SpreadJS創(chuàng)建Excel查看器
在現(xiàn)代的Web應(yīng)用開發(fā)中,Excel文件的處理和展示是一項(xiàng)常見的需求,小編今天將為大家展示如何借助SpreadJS來創(chuàng)建一個(gè)Excel查看器,感興趣的小伙伴可以了解下
2023-12-12
Iview DatePicker 限制選擇當(dāng)前月份及以后的月份
文章介紹了如何使用iviewDatePicker組件限制用戶只能選擇當(dāng)前月份及以后的月份,并提供了相關(guān)的html代碼和js代碼示例,感興趣的朋友跟隨小編一起看看吧
2024-11-11
JAVASCRIPT模式窗口中下載文件無法接收iframe的流
模式窗口中下載文件，有時(shí)在下載時(shí)發(fā)現(xiàn)服務(wù)器無法接收iframe的流，因?yàn)樵谀Ｊ酱翱谥袥]有觸發(fā)iframe的src重新定向事件
2013-10-10
js代碼實(shí)現(xiàn)無縫滾動(dòng)(文字和圖片)
js無縫滾動(dòng)，圖片無縫滾動(dòng)，文字無縫滾動(dòng)，基于js代碼如何實(shí)現(xiàn)，本篇文章給大家詳解js代碼實(shí)現(xiàn)無縫滾動(dòng)(文字和圖片)，需要的朋友可以參考下
2015-08-08
input鏈接頁面、打開新網(wǎng)頁等等的具體實(shí)現(xiàn)
input可以鏈接到某頁、返回、打開新網(wǎng)頁、打開無邊框的新窗口等等，本文整理了一些，感興趣的朋友可以參考下
2013-12-12