一个不需要jQuery实现的标签选项卡切换效果，代码简洁易用。默认是鼠标悬停显示标签效果，可将其中的onmouseover修改为onclick点击效果

使用方法：

1、将附件中的index.html中的钢性铸铁样式以及代码部分拷贝到你需要的地方即可相关链接：几行简单的jQuery代码搞定标签标签切换效果

展示效果图：

效果展示源码下载

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题点击切换选项卡代码/title style type=' text/CSS ' * { margin :0；划水：0;列表样式-:型无；}a，img { border :0 } body { font :12 px/180% Arial，Helvetica，无衬线'新宋体；} .选项卡1 {宽度：401 px边框-顶部： # cccccccc实心1px边框-底部： # cccccc实心1pxmargin:50px auto 0 auto}。菜单{ height :28 pxborder-right : # cccccc solid 1px；}.菜单li { float:left宽度：99 px文本对齐：居中；行高：28 px高度：28 px光标：指针指针；边框-左侧：#cccccc实心1pxcolor : # 666 font-size :14 px；飞越：隐藏；background: # E0E2EB}。菜单Li . off { background : # ffffcolor : # 336699 font-weight : bold；}.menudiv { height:200px边框-左侧：#cccccc实心1pxborder-右侧： # cccccc实心1px边框-top :0；背景：#fefefe} .menudiv div { padding:15px行高：28 px}/style脚本类型=' text/JavaScript '函数setTab(name，cursel){ cursel _ 0=cursel；for(var I=1；i=links _ lenI){ var menu=document。getelementbyid(名称(一)；var菜单div=文档。getelementbyid(' con _ ' name ' _ ' I)；if(I==cursel){ menu。类名=' off菜单分区。风格。display=' block} else { menu.className=menu div。风格。显示='无'；} } }函数next(){ cursel _ 0；if(cursel _ 0 link _ len)cursel _ 0=1 settab(name _ 0，cursel _ 0)；} var name _ 0=' one var cursel _ 0=1；var ScrollTime=3000//循环周期（毫秒)var links _ len，iintervalionload=function(){ var links=document。getelementbyid('选项卡1 ').getElementsByTagName(' Li ')link _ len=links。长度；for(var I=0；ilinks _ lenI){ link[I].onmouseover=function(){ clearInterval(iIntervalId)；这个。onmouseout=function(){ iIntervalId=setInterval(下一步，滚动时间)；} } }文档。getelementbyid(' con _ ' name _ 0 ' _ ' links _ len)。父节点。onmouseover=function(){ clearInterval(iIntervalId)；这个。onmouseout=function(){ iIntervalId=setInterval(下一步，滚动时间)；}}setTab(name_0，cursel _ 0)；iIntervalId=setInterval(下一步，滚动时间)；}/script/head dydiv class=' tab 1 ' id=' tab 1 ' div class=' menu ' ulli id=' one 1 ' onclick=' setTab '(one，1)首页/Lili id=' one 2 ' onclick=' SetTab '(one，2)点击看看/Lili id=' one 3 ' onclick=' SetTab '(one，3)会自动的/Lili id=' one 4 ' onclick=' SetTab '(one，4)我的网站/Li/ul/div class=' menu div ' div id=' con _ one _ 1 '我的网站/div div id=' con _ one _ 2 ' style=' display : none；射流研究…代码，导航菜单/div div id=' con _ one _ 3 ' style=' display : none；'看到效果了吗？/div div id=' con _ one _ 4 ' style=' display : none；'我的网站我做主/div/div/div style=' text-align : center；clear:both双双/div/正文/html以上内容就是本文使用简单纯射流研究…实现点击切换拉环标签实例，希望对大家学习射流研究…知识制作网页特效有所帮助。