js 实现的简单选项卡原理(支持IE)

最新推荐文章于 2021-06-03 16:26:14 发布

--------11111111111-

最新推荐文章于 2021-06-03 16:26:14 发布

阅读量115

点赞数

分类专栏： javascript 文章标签： HTML JavaScript IE CSS XHTML ViewUI

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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 language="javascript">

    function tags(obj){
        var uls = document.getElementsByTagName('ul');

        for(var i=0;i<uls.length;i++){
             uls[i].className='unselected';

        }
        obj.className='selected';

        document.getElementById('one').className   = 'divunselectd';
        document.getElementById('two').className   = 'divunselectd';
        document.getElementById('three').className = 'divunselectd';

        if('a' == obj.id){
            document.getElementById('one').className = 'divselectd';
        }else if('b' == obj.id){
            document.getElementById('two').className = 'divselectd';
        }else {
            document.getElementById('three').className = 'divselectd';
        }
    }

</script>

<style type="text/css">

.selected{
background-color:#FFFF00;
border:#FF0000 1px solid;
}
.unselected{
background-color:#00FF00;
}

.divselectd{
display:'';
background-color:yellow;
width:50%;
}
.divunselectd{
display: none;
background-color:yellow;
width:50%;
}
</style>
</head>

<body>

<div style="text-align:center; float:left; width:100%;" align="center" >
    <ul style="float:left" οnclick="tags(this);" class="selected"   id="a" style="margin-left:0px; margin-right:3px;">one</ul>
    <ul style="float:left" οnclick="tags(this);" class="unselected" id="b" style="margin-left:2px; margin-right:3px;">two</ul>
    <ul style="float:left" οnclick="tags(this);" class="unselected" id='c' style="margin-left:2px;">three</ul>
</div>

<div id="one" class="divselectd">one</div>
<div id="two"   class="divunselectd">two</div>
<div id="three" class="divunselectd">three</div>

</body>
</html>

--------11111111111-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现的简单选项卡原理(支持IE)

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫