首页 > 代码库 > 基于jquery的页面代码的优化

基于jquery的页面代码的优化

2024-08-02 14:26:37   218人阅读

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

<span class="alxx_text02" id="select3_span"> 
<a href="http://www.mamicode.com/#" 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
  });
根据上述代码可以大大简化代码的冗余，也利于代码的扩展，如果页面上选项增加，根据修优化后的代码可以直接应对，不用反复修改
 

基于jquery的页面代码的优化


联系
我们