为了账号安全,请及时绑定邮箱和手机立即绑定

JS的点击事件怎么优化

/ 猿问

JS的点击事件怎么优化

TankDad 2017-09-14 12:05:32

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

</head>

<body>

<div class="container">

<ul class="nav nav-tabs">

<li id="li1" class="active"><a href="#">11111</a></li>

<li id="li2"><a href="#">11111</a></li>

<li id="li3"><a href="#">11111</a></li>

</ul>

</div>

<script type="text/javascript">

var oLi1 = document.getElementById('li1')

var oLi2 = document.getElementById('li2')

var oLi3 = document.getElementById('li3')

oLi1.onclick = function(){

oLi1.className ='active'

oLi2.className =''

oLi3.className =''

}

oLi2.onclick = function(){

oLi2.className ='active'

oLi1.className =''

oLi3.className =''

}

oLi3.onclick = function(){

oLi3.className ='active'

oLi2.className =''

oLi1.className =''

}

</script>

</body>

</html>


查看完整描述

2 回答

?
橋本奈奈未
var nav = document.querySelector('.nav');
    nav.onclick = function (e) {
        var el = e.target,
            active = this.querySelector('.active');
        if(el.className == 'active'){
            return;
        }
        active.className = '';
        el.className='active';
    };


查看完整回答
反对 2017-09-14
?
李晓健
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <ul id="box" class="nav nav-tabs">
        <li id="li1" class="active"><a href="#">11111</a></li>
        <li id="li2"><a href="#">11111</a></li>
        <li id="li3"><a href="#">11111</a></li>
    </ul>
</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.onclick = function (e) {
        var target = e.target.parentElement;
        if(target.className === 'active'){
            return;
        }
        var lis = box.getElementsByTagName('li');
        for(var i=0,len=lis.length;i<len;i++){
            lis[i].className = ''
        }
        target.className='active';
    };
</script>
</body>
</html>

这个组件boostrap应该现成的吧。

查看完整回答
反对 2017-09-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信