首页 > 代码库 > 基于jquery的页面代码的优化
基于jquery的页面代码的优化
高亮显示,选中的文字链接
显示效果如下
默认选择“通知公告”效果 通知公告 学院动态 行业动态
选择“学院动态”效果 通知公告 学院动态 行业动态
选择“行业动态”效果 通知公告 学院动态 行业动态
1)html如下
<span class="alxx_text01" id="select1_span">
<a href="http://www.mamicode.com/#" id="select1">通知公告</a>
<span class="alxx_text02" id="select2_span">
<a href="http://www.mamicode.com/#" id="select2">学院动态</a>
<span class="alxx_text02" id="select3_span">
<a href="http://www.mamicode.com/#" id="select3">行业动态</a>
<a href="http://www.mamicode.com/#" id="select1">通知公告</a>
<span class="alxx_text02" id="select2_span">
<a href="http://www.mamicode.com/#" id="select2">学院动态</a>
<span class="alxx_text02" id="select3_span">
<a href="http://www.mamicode.com/#" id="select3">行业动态</a>
2)新建js文件控制html class显示时机,比如 在选中"学院动态" 设置class里的样式是alxx_text01,而其他两个选项的
样式是 alxx_text02
具体js写法
$("#select1").click(function(e) {
$("#select1_span").attr(class,"alxx_text01") ;
});
$("#select2").click(function(e) {
$("#select3").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
});
根据上述代码可以大大简化代码的冗余,也利于代码的扩展,如果页面上选项增加,根据修优化后的代码可以直接应对,不用反复修改
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的页面代码的优化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。