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选项卡

时间: 2024-09-30 10:51:17

CSS选项卡的相关文章

利用radio实现纯css选项卡切换

代码文件如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>radio选项卡切换</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .test-box{width: 50%;ma

javascript\html\CSS 选项卡

效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> /* CSS样式制作 */ .tabStyle{ list-style:none; padding-left:5px; margin-bo

纯CSS选项卡

html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="123.css" rel="stylesheet" type="text/css"> </head> <body> <div id=

关于CSS需要知道的10件事

原文: http://dsheiko.com/weblog/10-things-to-need-to-know-about-css CSS may look as a simple language. In fact it can be simple only to use, but definitely not simple to maintain. CSS看起来是个简单的语言,实际上只是使用较为简单,但是很显然维护它并不简单. Observing that the maximum numbe

tab选项卡切换代码

tab选项卡切换代码,是通过js来控制一些div的显示达到选项卡切换的效果. 另外可以参考<tab选项卡切换代码>.<CSS选项卡效果代码>.<DIV+CSS选项卡>. 别的不多说了,看DIV+CSS选项卡的演示: 演示地址:tab-xuanxiangka-477/index.htm 下载地址:tab-xuanxiangka-477.zip 另外推荐QQ在线客服代码可以拖动浮动.对联广告滚动代码包括flash和图片.不间断图片左右滚动代码.左右上下浮动广告代码.可浮动的

常见选项卡内容切换+折叠+展开效果实现

1.选项卡效果预览 2.源码与简要说明 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>切换选项卡功能实现</title> 6 <link rel="stylesheet" href="css/switchTab.css" /> 7 </head> 8 <

IE开发人员工具教程

写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载等信息. 在这儿推荐两篇关于谷歌控制台怎么使用的三篇博文(在我看来这三篇博文是我看过介绍谷歌控制台最佳最全的使用手册啦) Chrome 控制台不完全指南   http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html Chro

完美平滑实现一个“回到顶部”

前言 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好.我们想要的效果是要有点缓冲效果. 现代浏览器陆续意识到了这种需求,scrollIntoView意思是滚动到可视,css中提供了scroll-behavior属性,js有Element.scrollIntoView()方法. scroll-behavior scroll-behavior属性可取值auto|smoot

【CSS】布局之选项卡与图片库

前面对简单的选项卡和简单的图片库进行了实现,现在把两者结合起来,实现下面这样的效果. 现在附上代码: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type&qu