界面简单，功能好用的JS选项卡资源-CSDN文库

共1个文件

html：1个

需积分: 9 201 浏览量 2008-10-21 15:59:27 上传评论收藏 1KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

.rar （1个子文件）

选项卡.html 3KB

<html> <head> <style> body { text-align:center; } .tab { width:422px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc; } .menu,.menu li { margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center; } .menu { border-bottom:1px solid #cccccc; } .menu .default { width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('/zhouyinli-administrator/eidtor/UploadFile/20071111204657176.jpg') no-repeat; } .menu .active { width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('/zhouyinli-administrator/eidtor/UploadFile/20071111204658612.jpg') no-repeat; } #more { width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('bg.jpg') no-repeat; color:#FF0000; font-weight:normal; } .con { width:422px; height:184px; margin:0 auto; } </style> <head> <body> <div class='tab'> <ul id='nav' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="more"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con'> </div> </div> <div style="display:none"> <div id="div_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> </div> <script> var my_id='nav'; function init(ids){ document.getElementById(ids).getElementsByTagName('li')[0].className='active'; document.getElementById('con').innerHTML=document.getElementById("div_l1").innerHTML;; } document.getElementById(my_id).onmouseover=onmousOver; function onmousOver(){ var obj=event.srcElement; if (obj.tagName=='LI'){ if (obj.className=='active'||obj.id=='more')return; var o=document.getElementById(my_id).getElementsByTagName('li'); for (var i=0;i<=o.length-2;i++){o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById('con').innerHTML=document.getElementById("div_"+obj.id).innerHTML;} } } init(my_id); </script> </body> </html>

评论收藏

内容反馈