javascript實(shí)現(xiàn)鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的效果

更新時(shí)間：2015年08月06日 12:47:26 作者：皮蛋

這篇文章主要介紹了javascript鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的方法,實(shí)例分析了javascript實(shí)現(xiàn)tab切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的效果。分享給大家供大家參考。具體如下：

這是個(gè)網(wǎng)上比較常見(jiàn)的菜單效果，鼠標(biāo)放上后相應(yīng)的內(nèi)容會(huì)切換，圖文布局方式。技術(shù)方面，是JS和CSS相配合來(lái)實(shí)現(xiàn)，代碼中的JS部分，你可以單獨(dú)摘取出來(lái)保存成一個(gè)JS文件，然后引入到頁(yè)面中，這樣使主頁(yè)面代碼簡(jiǎn)潔些。本效果在ie、火狐等瀏覽器下測(cè)試正常。

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

具體代碼如下：

<html>
<head>
<title>鼠標(biāo)放上后下面的內(nèi)容切換</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menuA{background:#333;float:left;padding-top:2px;width:100%;}
.menuA li{float:left;}
.menuA li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menuA .check a {background:#fff;color:#000;}
.menuB{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.menuB ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
<div class="menuA">
<ul>
   <li class="check"><a href="#">國(guó)際時(shí)事</a></li>
   <li><a href="#">精美壁紙</a></li>
   <li><a href="#">大國(guó)關(guān)系</a></li>
   <li><a href="#">歐美風(fēng)情</a></li>
</ul>
</div>
<div class="menuB">
 <ul style="display:block;" class="one">
 <li><a href="#">國(guó)際時(shí)事</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">精美壁紙</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">大國(guó)關(guān)系</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">歐美風(fēng)情</a></li>
 </ul>
</div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
 if(elements[s].className==name){
  return elements[s];
 }
 }
}
var tabList = $_class("menuA").getElementsByTagName("li")
 tabCon = $_class("menuB").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
 var t = i;
 tabList[t].onmouseover = function(){
  for(o=0;o<tabCon.length;o++){
  tabCon[o].style.display = "none";
  tabList[o].className = "";
  if(t==o){
   this.className = "check";
   tabCon[o].style.display = "block";
  }
  }
 }
 })()
}
</script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例
這篇文章主要介紹了JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
微信小程序?qū)崿F(xiàn)彈出菜單動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
JavaScript XML操作封裝類
最近研究XML 用JavaScript寫(xiě)了一個(gè)簡(jiǎn)單的XML讀取的操作類發(fā)給大家分享一下可兼容 IE 火狐 Safari Chrome 6月30日下午新修改了一下
2009-07-07
javascript 數(shù)字格式化輸出的實(shí)現(xiàn)代碼
這篇文章主要是對(duì)javascript中數(shù)字格式化輸出的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
學(xué)習(xí)javascript面向?qū)ο?實(shí)例講解面向?qū)ο筮x項(xiàng)卡
這篇文章主要介紹了面向?qū)ο筮x項(xiàng)卡實(shí)現(xiàn)方法，幫助大家更好地學(xué)習(xí)javascript面向?qū)ο螅信d趣的小伙伴們可以參考一下
2016-01-01
微信開(kāi)發(fā)之微信jssdk錄音功能開(kāi)發(fā)示例
這篇文章主要介紹了微信開(kāi)發(fā)之微信jssdk錄音功能開(kāi)發(fā)示例，在微信瀏覽器內(nèi)打開(kāi)的頁(yè)面，制作一個(gè)按鈕，用戶按住按鈕后開(kāi)始錄音，松手后停止錄音，感興趣的小伙伴們可以參考一下
2018-10-10
H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng)
這篇文章主要介紹了JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng),文中通過(guò)使用自定義熱鍵或者使用鍵盤(pán)上下左右鍵移動(dòng)圖片，以此來(lái)實(shí)現(xiàn)此功能，需要的朋友可以參考下
2019-10-10
js添加元素的簡(jiǎn)單方式示例
這篇文章主要給大家介紹了關(guān)于js添加元素的簡(jiǎn)單方式,文中通過(guò)代碼示例將每種實(shí)現(xiàn)的方法都介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-10-10
ES6中Promise的使用方法實(shí)例總結(jié)
這篇文章主要介紹了ES6中Promise的使用方法,結(jié)合實(shí)例形式總結(jié)分析了Promise對(duì)象中的各種常用方法及基本使用技巧,需要的朋友可以參考下
2020-02-02