JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果
更新時(shí)間：2016年09月21日 08:51:41 作者：webdm
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果。分享給大家供大家參考，具體如下：
<!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">
<meta charset="UTF-8">
<head>
<title>JS自制簡單使用的選項(xiàng)卡</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;}
#tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;}
#tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;}
#tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;}
#tabContent{ width:390px; height:360px; padding:5px; font-size:12px;}
#tabContent .hide{ display:none;}
</style>
</head>
<body>
<h1 id="what"></h1>
<div id="tabWarp">
<div id="tabMenu">
<ul>
<li class="curent">中餐</li>
<li>西餐</li>
<li>亞洲菜</li>
<li>河南菜</li>
</ul>
</div>
<div id="tabContent">
<div>
<p>中餐的內(nèi)容</p>
</div>
<div class="hide">
<p>西餐的內(nèi)容</p>
</div>
<div class="hide">
<p>亞洲菜的內(nèi)容</p>
</div>
<div class="hide">
<p>河南菜的內(nèi)容</p>
</div>
</div>
</div>
<script>
function fgTab(tabNav,tabBody){
var tabMenu=document.getElementById(tabNav);
var tabTitle=tabMenu.getElementsByTagName('li');
var tabContent=document.getElementById(tabBody);
var tabBody=tabContent.getElementsByTagName('div');
function switchTab(i){
tabTitle[i].onmouseover=function(){
for(j=0; j<tabTitle.length; j++){
if(i==j){
tabTitle[j].className='curent';
tabBody[j].style.display="block";
}else{
tabTitle[j].className='';
tabBody[j].style.display="none";
}
}
//document.getElementById('what').innerHTML = i+'<br/>'+out();
}
}
for( i=0; i<tabTitle.length; i++){
switchTab(i);
}
}
function out(){
return i + '<br/>'+j;
}
</script>
<script>
fgTab('tabMenu','tabContent');
</script>
</body>
</html>
運(yùn)行效果圖如下：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap表單的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
一般在JS頁面延遲執(zhí)行一些方法，本文整理了一些，大家可以嘗試操作下2013-11-11
這篇文章主要介紹了簡單了解Ajax表單序列化的實(shí)現(xiàn)方法,隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時(shí),若用POST方法向后臺(tái)提交數(shù)據(jù)時(shí),就需要將表單序列化,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了JavaScript之instanceof方法手寫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了原生JavaScript編寫連連看游戲的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
JS+CSS實(shí)現(xiàn)感應(yīng)鼠標(biāo)漸變顯示DIV層的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)感應(yīng)鼠標(biāo)漸變顯示DIV層的方法,涉及javascript對div層的逐漸顯示與隱藏的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
javascript面向?qū)ο笕筇卣髦^承實(shí)例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦^承,簡單描述了繼承的概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了繼承的常見實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
本文主要介紹了全面講解JavaScript原型與原型鏈，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
JavaScript?賦值,淺復(fù)制和深復(fù)制的區(qū)別
這篇文章主要介紹了JavaScript?賦值,淺復(fù)制和深復(fù)制的區(qū)別，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05