CSS选项卡
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);/* two1 */
var con=document.getElementById("con_"+name+"_"+i);/* con_two_1 */
menu.className=i==cursel?"hover":"";/*三目运算 等号优先*/
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script><style type="text/css">.city_ser_show{display:none;width:490px;height:200px;border:1px solid #CCCCCC;}
#con_two_1{display:block;}
#menubox{width:500px;height:24px;margin-bottom:7px;}
#menubox ul{margin:0;padding:0;}
#menubox ul li{float:left;list-style:none;display:inline;padding-top:7px;border:1px solid #D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text-</p><p>overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}
#menubox ul li.hover{border-top:2px solid #D1D1D1;border-right:2px solid #D1D1D1;border-left:2px solid #D1D1D1;color: #000000;font-weight:bold;border-bottom:0px solid #D1D1D1;}</style></head><body>
<div id="main">
<div id="menubox">
<!--样式1 滑动选项卡-->
<!--
<ul>
<li id="two1" onmousemove="setTab('two',1,6)" class="hover">选项卡1</li>
<li id="two2" onmousemove="setTab('two',2,6)">选项卡2</li>
<li id="two3" onmousemove="setTab('two',3,6)">选项卡3</li>
<li id="two4" onmousemove="setTab('two',4,6)">选项卡4</li>
<li id="two5" onmousemove="setTab('two',5,6)">选项卡5</li>
<li id="two6" onmousemove="setTab('two',6,6)">选项卡6</li>
</ul>
-->
<!--样式2 -->
<ul>
<li id="two1" onclick="setTab('two',1,6)" class="hover"><a>选项卡1</a></li>
<li id="two2" onclick="setTab('two',2,6)"><a>选项卡2</a></li>
<li id="two3" onclick="setTab('two',3,6)"><a>选项卡3</a></li>
<li id="two4" onclick="setTab('two',4,6)"><a>选项卡4</a></li>
<li id="two5" onclick="setTab('two',5,6)"><a>选项卡5</a></li>
<li id="two6" onclick="setTab('two',6,6)"><a>选项卡6</a></li>
</ul></div>
<div id="conten">
<div class="city_ser_show" id="con_two_1">
选项卡1
<p>选项卡1的值</p>
</div>
<div class="city_ser_show" id="con_two_2">
选项卡2
<p>选项卡2的值</p>
</div>
<div class="city_ser_show" id="con_two_3">
选项卡3
<p>选项卡3的值</p>
</div>
<div class="city_ser_show" id="con_two_4">
选项卡4
<p>选项卡4的值</p>
</div>
<div class="city_ser_show" id="con_two_5">
选项卡5
<p>选项卡5的值!</p>
</div>
<div class="city_ser_show" id="con_two_6">
选项卡6
<p>选项卡6的值!</p>
</div></div>
</div>
</body>
</html>
CSS选项卡的更多相关文章
- 利用radio实现纯css选项卡切换
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEX
- 纯CSS选项卡
html: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- 使用jQuery+css实现选项卡切换功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- Js脚本实现选项卡的实例
效果演示: 具体代码: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http:/ ...
- 前端页面重构技巧总结TIP【持续更新...】
本文均为项目实战经验,要求兼容至IE8,所以以下内容均为兼容代码,欢迎各位小伙伴批评指教.其实重构页面是一门学问,看似简单,却暗藏很多学问.实际项目中页面的重构有以下几点最基本需求: 1.需要使用合理 ...
- Vue.js 相关知识（基础）
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
- IE开发人员工具教程
写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
随机推荐
- Oracle 排序规则
<pre name="code" class="html">SQL> select * from t1 where id>=1 and ...
- C语言深度解剖读书笔记(6.函数的核心)
对于本节的函数内容其实就没什么难点了,但是对于函数这节又涉及到了顺序点的问题,我觉得可以还是忽略吧. 本节知识点: 1.函数中的顺序点:f(k,k++); 这样的问题大多跟编译器有关,不要去刻意追求 ...
- RPC 的概念模型与实现解析（转）
今天分布式应用.云计算.微服务大行其道,作为其技术基石之一的 RPC 你了解多少?一篇 RPC 的技术总结文章,数了下 5k+ 字,略长,可能也不适合休闲的碎片化时间阅读,可以先收藏抽空再细读:) 全 ...
- linux route命令的使用详解
route命令用于显示和操作IP路由表.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现.在Linux系统中,设置路由通常是 为了解决以下问题:该Linu ...
- 执行Asp.net应用程序在Linux上的3种托管方式
执行Asp.net应用程序在Linux上的3种托管方式 想要执行Asp.net应用程序在Linux上.我们有3种选择: 1.使用Apache作为Webserver.使用mod_mono:http:// ...
- 14.4.3.1 The InnoDB Buffer Pool
14.4.3.1 The InnoDB Buffer Pool 14.4.3.2 Configuring Multiple Buffer Pool Instances 14.4.3.3 Making ...
- Android 实现自己定义多级树控件和全选与反选的效果
博文開始之前,首先要感谢大牛:(lmj623565791),本博文是在其博文http://blog.csdn.net/lmj623565791/article/details/40212367基础上进 ...
- MySQL字符串函数、日期时间函数
MySQL字符串函数.日期时间函数 一.常见字符串函数: 1.CHAR_LENGTH 获取长度(字符为单位) 2.FORMAT 格式化 3.INSERT 替换的方式插入 4.INSTR 获取位 ...
- 总结文件操作函数-文件夹（三）-C语言
获取.改变当前文件夹: 原型为: #include <unistd.h> //头文件 char *getcwd(char *buf, size_t size); //获取当前文件夹.相 ...
- poj 动态规划的主题列表和总结
此文转载别人,希望自己可以做完这些题目. 1.POJ动态规划题目列表 easy:1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, ...