zoukankan      html  css  js  c++  java
  • 基于jquery的页面代码的优化

    高亮显示,选中的文字链接
    显示效果如下
    默认选择“通知公告”效果 通知公告 学院动态 行业动态
          选择“学院动态”效果 通知公告 学院动态 行业动态
          选择“行业动态”效果 通知公告 学院动态 行业动态
     1)html如下
    <span class="alxx_text01" id="select1_span">
        <a href="#" id="select1">通知公告</a>&nbsp;&nbsp;
     
    <span class="alxx_text02" id="select2_span"> 
        <a href="#" id="select2">学院动态</a>&nbsp;&nbsp;

    <span class="alxx_text02" id="select3_span"> 
    <a href="#" id="select3">行业动态</a>&nbsp;&nbsp; 
     
     2)新建js文件控制html class显示时机,比如 在选中"学院动态" 设置class里的样式是alxx_text01,而其他两个选项的
    样式是 alxx_text02
    具体js写法
       $("#select1").click(function(e) {
        $("#select1_span").attr(class,"alxx_text01") ;
         $("#select2_span").attr(class,"alxx_text02") ;
         $("#select3_span").attr(class,"alxx_text02") ;   

      });
      $("#select2").click(function(e) {
        $("#select1_span").attr(class,"alxx_text02") ;
         $("#select2_span").attr(class,"alxx_text01") ;
         $("#select3_span").attr(class,"alxx_text02") ;                
      });
      $("#select3").click(function(e) {
         $("#select1_span").attr(class,"alxx_text02") ;
         $("#select2_span").attr(class,"alxx_text02") ;
         $("#select3_span").attr(class,"alxx_text01") ;

      });
    这样写代码冗余,不易维护,因此从集中的全局角度出发,修改上述代码简化代码写法变为
       var menus = $('.alxx_divt01 .alxx_text02, .alxx_divt01 .alxx_text01');//先找到div下面<span〉需要切换的样式
      menus.find('a').click(function(e) { //找到样式对应的标签
      menus.removeClass().addClass('alxx_text02');//先把所有相关样式都设置成非高亮显示的css
      var current = $(e.target).parent();//e.target是当前事件的事件源,即<a>
      current.removeClass().addClass('alxx_text01');//设置当前选中的span的样式是高亮显示的css
      });
    根据上述代码可以大大简化代码的冗余,也利于代码的扩展,如果页面上选项增加,根据修优化后的代码可以直接应对,不用反复修改
     
  • 相关阅读:
    线程的资源释放(一)
    iOS开发完整项目
    iOS开发多线程技术方案
    Windows 7 Beta泄漏版存在安全问题 狼人:
    工信部:黑客入侵等是网络安全防护工作的重点 狼人:
    微软下周2将发布13个补丁 修复26个安全漏洞 狼人:
    调查显示互联网14%SSL认证不安全 狼人:
    09年恶意软件放缓 2010年共享最危险 狼人:
    IE曝新安全漏洞 千万网民隐私遭受威胁 狼人:
    安全关注:2009年信息安全八大预测 狼人:
  • 原文地址:https://www.cnblogs.com/jinhuixin/p/4103630.html
Copyright © 2011-2022 走看看