BlogJava 联系 聚合 管理  

Blog Stats

文章档案


liangchao

兼容的选项卡效果
<html>
<head>
<style> body {
    text-align:center;
}
.tab
{
    width:432px;
    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('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.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('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.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;
    text-align:right
}
.con
{
    width:422px;
    height:184px;
    margin:0 auto;
}
</style>
<head>
<body>
<script>
function init(ids,cons,dis){
         document.getElementById(ids).getElementsByTagName('li')[0].className='active';
        document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
//        document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
        document.getElementById(ids).onmouseover=function(e){onmousOver(ids,cons,dis,e);}//点击激发效果
}
function onmousOver(ids,cons,dis,e){
o = e || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
        if (obj.className=='active'||obj.id=='more')return;
        var o=document.getElementById(ids).getElementsByTagName('li');
        for (var i=0;i<=o.length-1;i++){o[i].className='default'}
        
        obj.className='active';
        if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
</script>
<!--#1-->
<div class='tab'>
        <ul id='nav1' 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="l5" class='default'>第5新闻</li>
        </ul>
        <div class='con' id='con1'>
        </div>
    </div>
    <div></div>
    <div></div>
    <div></div>
<div style="display:none">    
    <div id="div1_l1">
        <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
    </div>
    <div id="div1_l2">
        <span>所以特来问一下高手们，请大家帮帮忙！</span>
    </div>
    <div id="div1_l3">
        <span>找了几个来改，都是头部的菜单那里太难定位了</span>
    </div>
    <div id="div1_l4">
        <span>当鼠标放上去时就变，而不用点了！</span>
    </div>
    <div id="div1_l5">
        <span>增加了！</span>
    </div>
</div>
<script>
init('nav1','con1',"div1_");
</script>

</body>
</html>
posted on 2008-07-10 15:33 梁超 阅读(113) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: