JS+CSS实现仿msn风格选项卡效果代码

前端技术 2023/09/06 JavaScript

本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码。分享给大家供大家参考，具体如下：

这是一款来自MSN网站的选项卡，清新淡蓝色风格，新闻类、资讯类、文章类网站都比较适合使用，代码扩展性高，W3C标准设计，兼容IE、火狐等多种浏览器，整体效果非常不错。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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 选项卡</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\">分类导航</li>
 <li onclick=\"tabit(this)\" id=\"tabap1_btn_2\">网页特效</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\">这里是最新上传的内容</div>
 <div style=\"display: none;\" class=\"tbcon\" id=\"tabap1_div_1\">这里是分类导航</div>
 <div style=\"display: none;\" class=\"tbcon\" id=\"tabap1_div_2\">网页特效的内容</div>
 <div style=\"display: none;\" class=\"tbcon\" id=\"tabap1_div_3\">浏览排行</div>
 </div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/14914

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案