介绍 & lt; ! doctype html>,
& lt; html lang=皕h-cn"祝辞,
& lt; head>,
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/祝辞,
& lt; script 类型=拔谋?javascript"祝辞,
function doClick (o) {,//当前被中的对象设置css
o.className=皀av_current",,
var j,
var id,
var e,//遍历所有的页签,没有被选中的设置其没有被选中的css
(var i=1; i<=7,我+ +){,//i<7,多少个栏目就填多大值,
id =皀av" +我,,=j . getelementbyid (id),,
时间=e . getelementbyid (“sub" + i),,
如果(id !=, o.id) {,
j.className=皀av_link",,
时间=e.style.display “none",,
}{,其他
时间=e.style.display “block",,
},
},
},
时间/script> & lt;
& lt; style 类型=拔谋?css",媒体=皊creen"祝辞,
div,身体,还以为,dl, dt,,,, ul,, ol,,李,h2,, h3,, h4,, h5,,编辑,,h7,,,以前,代码,,,,自定义字段,,传说,,,,按钮,输入,文本区域,,p,引用,,,,td {,保证金:0;,填充:0,},
自定义字段,img {,边境:0,none },
:focus {,大纲:0,},
.dis{显示:块;},
.undis{显示:没有;},
ol, ul {, list-style: none },
{.fr 显示:内联;,浮动:没错! important },
{.fl 显示:内联;,浮动:左! important },
.show {,显示:block },
.hide {,显示:none },
{.highlight 颜色:# + 30 ! important },
{.important 粗细:大胆! important },
{.center text-align:中心! important },
{body 字体:12 px/1.5,大河马字体,,无衬线;,颜色:# 333,},
{a 文字修饰:没有,颜色:# 333,},
答:hover {,文字修饰:下划线;,颜色:# E30751 },
.nav_current{,浮动:左;背景:# FFF;,颜色:# F00;,},
.nav_link{,浮动:左;},
.nav_current: hover .nav_link:悬停{,颜色:# FF6600;},
# dww-menu {,宽度:978 px;,溢出:隐藏;,边界:1 px # dcdcdc 固体,,},
# dww-menu .mod-hd {,溢出:隐藏;,高度:30 px;,行高:30 px;,位置:相对;,背景:# CCCCCC repeat-x 0, 0,},
# dww-menu .mod-hd li {,浮动:左;,光标:指针;,text-align:中心;,高度:30 px;,行高:30 px;,填充:0,10 px;,字母间距:1 px;,首字母,大写;,边境:1 px # dcdcdc solid },
# dww-menu .mod-hd li.hover {,粗细:900;,背景:# FFF },
{# dww-menu .mod-bd 填充:5 px 10 px },
# dww-menu .mod-bd div {颜色:# BFBFBF;,行高:24 px },
# dww-menu .mod-bd div.show {,显示:block },
# dww-menu .mod-bd div a {,显示:inline-block;,填充:0,4 px },
时间/style> & lt;
& lt; base 目标=癬blank",/祝辞,
时间/head> & lt;
& lt; body>,
& lt; div 祝辞,
& lt; div id=癲ww-menu",类=癿od-tab"祝辞,
& lt; div 类=癿od-hd"祝辞,
& lt; ul 类=皌ab-nav"祝辞,
& lt; li 类=皀av_current", id=皀av1", onMouseOver=癹avascript: doClick(这)“在标签1 & lt;/li>,
& lt; li 类=皀av_link", id=皀av2", onMouseOver=癹avascript: doClick(这)“在标签2 & lt;/li>,
& lt; li 类=皀av_link", id=皀av3", onMouseOver=癹avascript: doClick(这)“在标签3 & lt;/li>,
& lt; li 类=皀av_link", id=皀av4", onMouseOver=癹avascript: doClick(这)“在标签4 & lt;/li>,
& lt; li 类=皀av_link", id=皀av5", onMouseOver=癹avascript: doClick(这)“在标签5 & lt;/li>,
& lt; li 类=皀av_link", id=皀av6", onMouseOver=癹avascript: doClick(这)“在标签6 & lt;/li>,
& lt; li 类=皀av_link", id=皀av7", onMouseOver=癹avascript: doClick(这)“在标签7 & lt;/li>,
时间/ul> & lt;
时间/div> & lt;
& lt; div 类=癿od-bd"祝辞,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关div + css如何实现标签标签的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体步骤:
1,创建页签,以及页签内容的div。
2,编写被选中的页签和页签内容div显示,隐藏的样式。
3,编写js方法,根据被选中的页签,显示相应的页签内容。
例如:
