JavaScript 封裝一個(gè)tab效果源碼分享
更新時(shí)間：2015年09月15日 12:12:21 投稿：mrr
本文給大家分享javascript封裝一個(gè)tab效果源碼分享，感興趣的朋友一起來(lái)看看吧
效果圖如下：
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()">愛(ài)心</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è)置顯示的頁(yè)面
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)頁(yè)換膚功能
這篇文章主要為大家詳細(xì)介紹了js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能，文中示例代碼介紹的非常詳細(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)、日志查詢(xún)的流程,以及監(jiān)控錯(cuò)誤的類(lèi)型和用戶埋點(diǎn)統(tǒng)計(jì)的手段,同時(shí)提到了PV和UV的統(tǒng)計(jì)方法,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細(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)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義提示窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript使用SpreadJS創(chuàng)建Excel查看器
在現(xiàn)代的Web應(yīng)用開(kāi)發(fā)中,Excel文件的處理和展示是一項(xiàng)常見(jiàn)的需求,小編今天將為大家展示如何借助SpreadJS來(lái)創(chuàng)建一個(gè)Excel查看器,感興趣的小伙伴可以了解下2023-12-12
Iview DatePicker 限制選擇當(dāng)前月份及以后的月份
文章介紹了如何使用iviewDatePicker組件限制用戶只能選擇當(dāng)前月份及以后的月份,并提供了相關(guān)的html代碼和js代碼示例,感興趣的朋友跟隨小編一起看看吧2024-11-11
JAVASCRIPT模式窗口中下載文件無(wú)法接收iframe的流
模式窗口中下載文件，有時(shí)在下載時(shí)發(fā)現(xiàn)服務(wù)器無(wú)法接收iframe的流，因?yàn)樵谀Ｊ酱翱谥袥](méi)有觸發(fā)iframe的src重新定向事件2013-10-10
js代碼實(shí)現(xiàn)無(wú)縫滾動(dòng)(文字和圖片)
js無(wú)縫滾動(dòng)，圖片無(wú)縫滾動(dòng)，文字無(wú)縫滾動(dòng)，基于js代碼如何實(shí)現(xiàn)，本篇文章給大家詳解js代碼實(shí)現(xiàn)無(wú)縫滾動(dòng)(文字和圖片)，需要的朋友可以參考下2015-08-08
input鏈接頁(yè)面、打開(kāi)新網(wǎng)頁(yè)等等的具體實(shí)現(xiàn)
input可以鏈接到某頁(yè)、返回、打開(kāi)新網(wǎng)頁(yè)、打開(kāi)無(wú)邊框的新窗口等等，本文整理了一些，感興趣的朋友可以參考下2013-12-12