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


Posted in Javascript onOctober 22, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
原生js+ajax分页组件
Jan 30 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 #Javascript
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 #Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 #Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 #Javascript
13个PHP函数超实用
Oct 21 #Javascript
You might like
php发送post请求的三种方法
2014/02/11 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php实现的日历程序
2015/06/18 PHP
一个简单的php路由类
2016/05/29 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
YII框架常用技巧总结
2019/04/27 PHP
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
python缩进区别分析
2014/02/15 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
浅述python2与python3的简单区别
2018/09/19 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python 实现倒排索引的方法
2018/12/25 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
园艺师求职信
2014/04/27 职场文书
签约仪式策划方案
2014/06/02 职场文书
财产分割协议书范本
2014/11/03 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
利用python做表格数据处理
2021/04/13 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle