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 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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 print EOF实现方法
2009/05/21 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
sina的lightbox效果。
2007/01/09 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python实现搜索文本文件内容脚本
2018/06/22 Python
详解python 注释、变量、类型
2018/08/10 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python 字符串池化的前提
2020/07/03 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
入团者的自我评价分享
2013/12/02 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
请假条怎么写
2014/04/10 职场文书
六年级数学教学反思
2016/02/16 职场文书
详解Laravel制作API接口
2021/05/31 PHP
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
Django框架中表单的用法
2022/06/10 Python