2018-03-16

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、操作元素 宽高 $(“div”).height(); // 高度 $(“div”).width(...
    多佳小昕阅读 229评论 0 1
  • 泛型:泛型优点: 1,编译时可以保证类型安全。 2,不用做类型转换,获得一定的性能提升。 泛型约束: where ...
    hui_free阅读 226评论 0 2
  • HTTPS 单向双向认证 自签证书自签名的证书 CA证书 并且上传到github上面✅ 屏幕支持横屏的配置✅视频...
    蜗牛也有梦想阅读 251评论 0 0
  • 人生最可悲的,是失去了爱与被爱的能力,爱着爱着就怕了。 往事不可追忆,也别相信什么来日方长,如今最好。 从兰州到上...
    闫淑女阅读 689评论 0 0
  • 嫁给对的人,等到是一种幸运,等不到就一直等着好了,总会出现的,让自己变得更好就好了,做一个洁身自好,有品味,努力奋...
    又廷的矮方方阅读 172评论 0 0