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

基于jquery的页面代码的优化的更多相关文章

  1. 基于jquery的页面预载入效果(loading)

    css代码: <style> #loading{ position:absolute; width:300px; top:0px; left:50%; margin-left:-150px ...

  2. 基于jquery的页面分屏切换模板

    闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: <div class=" ...

  3. 基于Jquery的页面过渡效果(原创)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  4. jquery刷新页面代码

    window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于框架)opener.location.reload()刷新父窗口对象(用 ...

  5. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...

  6. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  7. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  8. 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

    在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象, ...

  9. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

随机推荐

  1. spring HibernateValidator 验证 子类不起作用

    spring HibernateValidator 验证 子类不起作用,在要验证的子类前加上@Valid即可. public class UserInfo { private int Id; @Val ...

  2. linx 实用操作命令一

    如果apache安装成为linux的服务的话,可以用以下命令操作:service httpd start 启动service httpd restart 重新启动service httpd stop ...

  3. json与gson

    json:java中将json字符串转换成实体对象时,key值不能大写.将实体对象转换成json时,会默认把key值改成小写 gson:java中将json字符串转换成实体对象时,要与实体对象的字段值 ...

  4. 七个你可能不了解的CSS单位

    我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...

  5. Android OptionMenu

    1.Java package com.fish.helloworld; import android.app.Activity; import android.content.Context; imp ...

  6. Windows Phone 资源管理与换肤思考

    新入手一台Windows 8的笔记本,安装了VS2013后,终于又可以开发WP了.公司暂时不愿意开发WP,那么咱就自行研究吧! 在没有WP开发环境的时候,曾经在WPF尝试了一下换肤功能的实现.最简单的 ...

  7. 在PHP项目中使用Standford Moss代码查重系统

    Standford Moss 系统是斯坦福大学大名鼎鼎的代码查重系统,它可以查出哪些同学提交的代码是抄袭别人的,从而将提交结果拒之门外.它对一切希望使用该系统的人都是开放的,那么在PHP的项目中如何使 ...

  8. Win2003打不开https的问题

    碰到客户做问题是能打开https://www.baidu.com 这个网页 打不开 https://sha256.alipay.com/SHA256/index.htm支付宝这个网页      解决办 ...

  9. C#虚方法和覆写方法

  10. Ado.net利用反射执行SQL得到实体

    public Model.orderParent GetTraceIDforID(string orderid) { string sql = string.Format(" select ...