默认选择“通知公告”效果 通知公告 学院动态 行业动态
选择“学院动态”效果 通知公告 学院动态 行业动态
选择“行业动态”效果 通知公告 学院动态 行业动态
$("#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
});
根据上述代码可以大大简化代码的冗余，也利于代码的扩展，如果页面上选项增加，根据修优化后的代码可以直接应对，不用反复修改
