web前端选项卡的实现

最新推荐文章于 2021-06-03 12:24:56 发布

ddxr5515

最新推荐文章于 2021-06-03 12:24:56 发布

阅读量772

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/lilyxiaoyy/p/11157143.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<button>11</button>
<button>22</button>
<button>33</button>
<button>44</button>
<script>
    //javascript实现方法
    // obtn = document.querySelectorAll('button');
    // for(var i = 0; i < obtn.length; i++){
    //     obtn[i].onclick = function(){
    //         for(var j = 0; j < obtn.length; j++){
    //             obtn[j].style.color = "black";
    //         }
    //         this.style.color = "red";
    //     }
    // }

    //jquery实现方法
    $('button').click(function() {
        $(this).css("color", "red").siblings().css("color", "black");
    });

</script>

<div>
    <ul>
        <li>
            <a href="javascript:void(0);">11</a>
        </li>
        <li>
            <a href="javascript:void(0);">22</a>
        </li>
        <li>
            <a href="javascript:void(0);">33</a>
        </li>
        <li>
            <a href="javascript:void(0);">44</a>
        </li>
    </ul>
</div>
<script>
    $('div ul li>a').click(function(){
        $(this).css({"text-decoration": "none", "color": "red"}).parent().siblings('li').children('a').css("color","black");
    });
</script>
</body>
</html>

转载于:https://www.cnblogs.com/lilyxiaoyy/p/11157143.html

ddxr5515

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端选项卡的实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <script src="js/jquery.js"></script></hea...
复制链接

扫一扫