html+css+js实现选项卡效果

最新推荐文章于 2024-01-24 12:19:34 发布

jiasanwan

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量1.5k

点赞数

文章标签： javascript 选项卡切换

本文链接：https://blog.csdn.net/jiasanwan/article/details/52180301

版权

一开始想的是直接css+js写死，但是这样js和css、html就不能够很好的分隔开，而且拓展性很差。

如果是进行一个迭代的项目，后期需要修改选项卡时，就会比较麻烦，所以应该要思考如何能将html、css、js尽量分隔开，并且提高拓展性

思路：

将选项卡的css效果单独取出来，JS判断是哪一个选项卡点击，就将css样式替换成被选中的，而未被点击的就恢复默认样式

代码：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的注册页面</title>

<script type="text/JavaScript">
function tabclick(){
    //先将所有选项卡的样式恢复为默认，再给被点击的选项卡添加选中样式
    var tab=document.getElementById("tab").getElementsByTagName("dt");
    var form=document.getElementById("div_tab").getElementsByTagName("form");
    for(i=0;i<tab.length;i++){
        tab[i].className='';
        form[i].className='';
        if(tab[i]==this){
            tab[i].className='tab';
            form[i].className='form_tab';
        }
    }
}
//如果被点击，就执行tabclick函数
function changetab(){
    var tab = document.getElementById("tab").getElementsByTagName("dt");
    for(i=0;i<=tab.length;i++){
        tab[i].οnclick=tabclick;
    }
}

window.οnlοad=function(){
    changetab();
}

</script>

<style type="text/css">
html,body{
    height:100%;
    margin:0;
    padding:0;
    background-color:#fcfcfc;
}
#calider{
    min-height:100%;
    height:100%;
    position: relative;
}
#page{
    width:100%;
}

dl{
    list-style-type:none;
    display:inline-block;
    width:100%;
    height:46px;
    border-bottom:1px solid #ccc;
}
dl dt{
    display:inline-block;
    line-height:45px;
    height:45px;
    width:240px;
    font-size:18px;
    text-align: center;
    float:left;
    border:1px solid #ccc;
    border-bottom:none;
    background-color:#f0f0f0;
}
.tab{
    background-color: #FFF;
    line-height:46px;
    height:46px;
}
#tab_phone{
    margin-left:150px;
}

#page .form_tab{
    position:relative;
    top:0;
    border:0px solid #ccc;
    display: block;
}
#page div form{
    display:none;    
}
</style>
</head>
<body>

<div id="calider">
    <div id="page">
        <dl id="tab">
            <dt id="tab_phone" class="tab">交出电话号码来</dt>
            <dt id="tab_mail">交出邮箱来</dt>
        </dl>
        <div id="div_tab">
            <form name="form1" method="get" class="form_tab">
                <table id="phone">
                    <tr>
                        <td>电话<span>*</span>:</td>
                        <td><input type="text" /></td>
                    </tr>
                </table>
            </form>     
            <form name="form2" method="get">
                <table id="mail">
                    <tr>
                        <td>邮箱<span>*</span>:</td>
                        <td><input type="text" /></td>
                    </tr>
                </table>
            </form>   
           </div>
     </div>
</div>

</body>
</html>

注意：

js中为click事件绑定函数时，我写的是： tab[i].οnclick=tabclick();，但是我点击选项卡的时候并没有产生预期效果，调试的时候发现我调用的方法tabclick()是undefined的。

找了下度娘，原因是js调用函数，如果是 var a= f1() 表示把i函数f1的运行结果赋值给a；如果是var b=f2()则表示将这个函数名f2赋值给b，就和指针有点类似，如果调用b就会去找到f2这个函数并执行

我这里是希望在页面加载后，如果点击了任一选项卡最后都会调用tabclick()这个方法，所以我这里应该是不加括号tab[i].οnclick=tabclick;，让它去找到tabclick这个函数并执行。

jiasanwan

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html+css+js实现选项卡效果

一开始想的是直接css+js写死，但是这样js和css、html就不能够很好的分隔开，而且拓展性很差。如果是进行一个迭代的项目，后期需要修改选项卡时，就会比较麻烦，所以应该要思考如何能将html、css、js尽量分隔开，并且提高拓展性思路：将选项卡的css效果单独取出来，JS判断是哪一个选项卡点击，就将css样式替换成被选中的，而未被点击的就恢复默认样式代码
复制链接

扫一扫