Home > Article > Web Front-end > JS CSS implements msn style tab effect code_javascript skills

JS CSS implements msn style tab effect code_javascript skills

WBOYOriginal: 2016-05-16 15:35:381151browse

The example in this article describes the JS CSS code to implement the msn-style tab effect. Share it with everyone for your reference, the details are as follows:

This is a tab from the MSN website, with a fresh light blue style. It is more suitable for news, information, and article websites. The code is highly scalable, W3C standard design, compatible with IE, Firefox, etc. The overall effect of the browser is very good.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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>

I hope this article will be helpful to everyone in JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery multi-level accordion menu example explanation_jqueryNext article：jQuery multi-level accordion menu example explanation_jquery

See more

JS CSS implements msn style tab effect code_javascript skills

Related articles