這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素css樣式實(shí)現(xiàn)切換功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼。分享給大家供大家參考，具體如下：

這是一款來自MSN網(wǎng)站的選項(xiàng)卡，清新淡藍(lán)色風(fēng)格，新聞?lì)?、資訊類、文章類網(wǎng)站都比較適合使用，代碼擴(kuò)展性高，W3C標(biāo)準(zhǔn)設(shè)計(jì)，兼容IE、火狐等多種瀏覽器，整體效果非常不錯(cuò)。

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

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/

具體代碼如下：

<!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">
<head>
<title>msn 選項(xiàng)卡</title>
<style type="text/css">
body {text-align:center;color:#666;font-size:12px;font-family:tahoma,arial,sans-serif;}
h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}
li{list-style:none;}
a img{border:none;}
a:link{text-decoration:none;color:#07519A;}
a:visited{text-decoration:none;color:#07519A;}
a:active,a:hover{text-decoration:underline;color:#07519A;}
.tarea0{float:left;height:220px;width:242px;}
.tarea{border:1px solid #ace;float:left;height:156px;text-align:center;width:242px;}
.tarea1{border:1px solid #ace;float:left;height:251px;text-align:center;width:242px;}
.tarea2{border:1px solid #ace;float:left;height:217px;text-align:center;width:243px;}
ul.tbtn li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-decoration:none;width:60px;background:url(images/msfp_015.gif) repeat-x;}
ul.tbtn li:hover{text-decoration:underline;}
ul.tbtn li.curr{background:#fff;border-bottom-color:#fff;cursor:default;color:#666;}
.tbcon{margin:8px 0px 6px 8px;text-align:left;padding:8px;}
</style>
<script language="javascript" type="text/javascript">
function tabit(btn){
 var idname = new String(btn.id);
 var s = idname.indexOf("_");
 var e = idname.lastIndexOf("_")+1;
 var tabName = idname.substr(0, s);
 var id = parseInt(idname.substr(e, 1));
 var tabNumber = btn.parentNode.childNodes.length;
 for(i=0;i<tabNumber;i++){
  document.getElementById(tabName+"_div_"+i).style.display = "none";
  document.getElementById(tabName+"_btn_"+i).className = "";
 };
  document.getElementById(tabName+"_div_"+id).style.display = "block";
  btn.className = "curr";
};
</script>
</head>
<body>
<div class="tarea2" style="height:223px;">
 <ul class="tbtn">
 <li onclick="tabit(this)" id="tabap1_btn_0" class="curr">最新上傳</li>
 <li onclick="tabit(this)" id="tabap1_btn_1">分類導(dǎo)航</li>
 <li onclick="tabit(this)" id="tabap1_btn_2">網(wǎng)頁特效</li>
 <li style="border-right:none;" onclick="tabit(this)" id="tabap1_btn_3">瀏覽排行</li>
 </ul>
 <div class="clr"></div>
 <div class="tbcon" id="tabap1_div_0">這里是最新上傳的內(nèi)容</div>
 <div style="display: none;" class="tbcon" id="tabap1_div_1">這里是分類導(dǎo)航</div>
 <div style="display: none;" class="tbcon" id="tabap1_div_2">網(wǎng)頁特效的內(nèi)容</div>
 <div style="display: none;" class="tbcon" id="tabap1_div_3">瀏覽排行</div>
 </div>
</body>
</html>

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

您可能感興趣的文章: