JS+CSS实现仿msn风格选项卡效果代码
更新时间：2015年10月22日 09:43:12 作者：企鹅
这篇文章主要介绍了JS+CSS实现仿msn风格选项卡效果代码,涉及JavaScript响应鼠标事件动态变换页面元素css样式实现切换功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码。分享给大家供大家参考，具体如下：
这是一款来自MSN网站的选项卡，清新淡蓝色风格，新闻类、资讯类、文章类网站都比较适合使用，代码扩展性高，W3C标准设计，兼容IE、火狐等多种浏览器，整体效果非常不错。
运行效果截图如下：
在线演示地址如下：
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 选项卡</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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了Bootstrap进度条的学习使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家演示下js加密解密字符串可以自定义密码因子,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了js实现的类似于asp数据字典的数据类型代码实例,即js实现的字典数据类型,需要的朋友可以参考下2014-09-09
JavaScript+Node.js写一款markdown解析器
这篇文章主要介绍了利用JavaScript和Node.js写一款markdown解析器，首先编写getHtml函数，传入markdown文本字符串，下面更多详细内容，需要的小伙伴可以参考一下2022-02-02
这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
今天小编就为大家分享一篇layui的表单提交以及验证和修改弹框的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了如何采用call方式实现js继承,需要的朋友可以参考下2014-05-05
这篇文章主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了JavaScript删除指定子元素代码实例,本文给出了代码实例和实现代码解释,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了基于javascript实现页面加载loading效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
最新评论