2018-03-16

作者: zigzh | 来源:发表于2018-07-02 20:38 被阅读0次

jQuery实现菜单栏前台解耦,支持任意数量的按钮,后台可以通过枚举类或者读取properties文件判断...
-> 把维护的工作交给他人

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .isChoosen {
                color: yellowgreen;
            }
        </style>

    </head>

    <body>
        <a href="javascript:void(0);" id="bind1">按钮1</a>
        <a href="javascript:void(0);" id="bind2">按钮2</a>
        <a href="javascript:void(0);" id="bind3">按钮3</a>
        <a href="javascript:void(0);" id="bind4">按钮4</a>
        <a href="javascript:void(0);" id="bind5">按钮5</a>
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <script>
            $("a[id^='bind']").on("click", function() {
                $("a[id^='bind']").removeClass("isChoosen");
                $(this).addClass("isChoosen");
            });
        </script>
    </body>

</html>