基於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
  });根據上述代碼能夠大大簡化代碼的冗餘，也利於代碼的擴展，若是頁面上選項增長，根據修優化後的代碼能夠直接應對，不用反覆修改