快捷導(dǎo)航

javascript的tab切換原理與效果實(shí)現(xiàn)方法

更新時(shí)間：2015年01月10日 16:37:28 投稿：shichen2014

這篇文章主要介紹了javascript的tab切換原理與效果實(shí)現(xiàn)方法,實(shí)例分析了簡(jiǎn)單的tab切換實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript的tab切換原理與效果實(shí)現(xiàn)方法。分享給大家供大家參考。

具體實(shí)現(xiàn)方法如下：

<html>

<head>

<style type="text/css">

#container{border:solid 1px green;width:300px;height:300px;}

li{float:left;margin-left:20px;}

p{float:left;}

#sports,#military,#bbs{display:none;}

</style>

<script type="text/javascript">

function tab(pid){

 var ps = ['news','sports','military','bbs'];

 for(var i=0,len=ps.length;i<len;i++){

  if(ps[i] == pid){

   document.getElementById(ps[i]).style.display = "block";

  }else{

   document.getElementById(ps[i]).style.display = "none";

  }

 }

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li onmouseover="tab('news');">新聞</li>

  <li onmouseover="tab('sports');">體育</li>

  <li onmouseover="tab('military');">軍事</li>

  <li onmouseover="tab('bbs');">論壇</li>

 </ul>

 <p id="news">新聞新聞新聞新聞新聞</p>

 <p id="sports">體育體育體育體育體育</p>

 <p id="military">軍事軍事軍事軍事軍事</p>

 <p id="bbs">論壇論壇論壇論壇論壇</p>

</div>

</body>

</html>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序踩坑記錄之解決tabBar.list[3].selectedIconPath大小超過(guò)40kb
這篇文章主要給大家介紹了關(guān)于微信小程序踩坑記錄之解決tabBar.list[3].selectedIconPath大小超過(guò)40kb的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
HTTP?302?redirect應(yīng)用及介紹
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
js實(shí)現(xiàn)幻燈片播放圖片示例代碼
幻燈片播放圖片的效果想必大家都有見(jiàn)到過(guò)吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-11-11
微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)（包括后端）
這篇文章主要介紹了微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)方法（包括后端）,需要的朋友可以參考下
2019-08-08
在新窗口打開(kāi)超鏈接的方法小結(jié)
有時(shí)候我們想讓用戶(hù)在新窗口打開(kāi)網(wǎng)站，因?yàn)槟J(rèn)當(dāng)前窗口打開(kāi)，很多情況下，用戶(hù)并不喜歡
2013-04-04
第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識(shí)
第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識(shí)，本文為大家JS require.js模塊化工具的最基本知識(shí)點(diǎn)，感興趣的小伙伴們可以參考一下
2016-04-04
探討js字符串?dāng)?shù)組拼接的性能問(wèn)題
這篇文章主要介紹了有關(guān)js對(duì)字符串?dāng)?shù)組進(jìn)行拼接的性能問(wèn)題，字符串連接一直是js中性能最低的操作之一，應(yīng)該如何解決呢？請(qǐng)參看本文的介紹
2014-10-10
純js實(shí)現(xiàn)仿QQ郵箱彈出確認(rèn)框
仿QQ郵箱的彈出層，彈出確認(rèn)框，主要是用火狐的firebug把html和css扣了下來(lái)，沒(méi)有做封裝,就定義了一個(gè)拖動(dòng)事件. 大家可以封裝自己的彈出窗，嘿嘿！
2015-04-04
ES6之Proxy的get方法詳解
這篇文章主要介紹了ES6之Proxy的get方法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
javascript中的undefined和not defined區(qū)別示例介紹
這篇文章主要介紹了javascript中的undefined和not defined區(qū)別,需要的朋友可以參考下
2014-02-02