这段时间做一个小网站发现有时候特别需要点击不同的按钮去加载不同的css,这样可以确定点击的是哪个,由于每个按钮都是从后端数据库加载过来的,不仅是简简单单的用id或者是类名,用过this也不行:

前端加载的代码:

 {%for books in bookslist%}
<a href="#" id="a_{{books.books_id}}" name="a_books" onclick="books_message('{{books.books_id}}')">{{books.books_name}}</a>
{%end%}

js(jquery)代码:

 $("a").filter(".list-group-item").css({"background":"#C4E3F3","color":"#31708F"});
$("#a_" + books_id).css({"background":"#31708F","color":"white"});

js代码:

var  a = document.getElementsByName("a_books");

for(i=0;i<=a.length;i++){

a[i].style="";

document.getElementById("#a_" + books_id)..style="background:red";

}在代码下面还可以做其他的操作。。。

实现点击不同的按钮加载不同的css的更多相关文章

  1. bootstrap按钮加载状态改变

    bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后j ...

  2. php+ajax实现登录按钮加载loading效果

    php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...

  3. VC中使用GDI+实现为按钮加载Png图片

    http://blog.csdn.net/flyfish1986/article/details/5381605 VC中使用GDI+实现为按钮加载Png图片 http://www.codeprojec ...

  4. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  5. 动态加载js、css 代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...

  6. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  7. 刚部署的程序加载不出来css,js以及图片

    刚部署的程序加载不出来css,js以及图片,解决方式 需要在配置中加入静态资源 方法一: controller.xml中加入 <mvc:annotation-driven/> <mv ...

  8. 【WordPress】外网访问WordPress时无法加载样式表CSS

    情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...

  9. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

随机推荐

  1. validation验证器指定action中某些方法不需要验证

    今天写代码时,遇到个问题,在一个输入数据的页面有一个按钮,单击会发出请求从数据库中取数据,在这里出现问题,单击该按钮,配置的validation起作用,该请求没有到达后台的action 点击按钮选择作 ...

  2. 用css解决iframe的自适应问题(跨域下同样有用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. apache vhost

    httpd.conf: Include "F:/wamp/alias/*" <Directory "F:\wamp\www">    Options ...

  4. [Java 基础] 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法

    reference : http://www.cnblogs.com/linjiqin/archive/2013/05/30/3108188.html 在Java多线程应用中,队列的使用率很高,多数生 ...

  5. 在springMVC的controller层获取view层的参数的方式

    方法一:request.getParameter("name") 方法二:注解@RequestParam @RequestMapping("testRequestPara ...

  6. 20145206邹京儒《Java程序设计》第6周学习总结

    20145206 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. 从应用程序角度来看 ...

  7. mac版的PS和DW破解版安装

    到网上找到破解版的安装文件,一般是一个dmg安装文件,和一个补丁文件,安装的时候,要先断网,然后点击软件,选试用安装,安装完毕后,不要打开软件,直接关闭掉,然后到应用程序里找到软件图标,右击打开包文件 ...

  8. 【hdu 1060】【求N^N最低位数字】

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  9. oracle 11g r1 RAC增加新节点

    在一套两节点的rac上增加一个新的节点,详细的操作记录如下:   已有节点RAC1,RAC2 一,环境及版本: 公司环境:Vmware Esxi 5.5  操作系统:Redhat 5.8 x86_64 ...

  10. CentOS下Apache安装SSL

    https是一个安全的访问方式,数据在传输过程中是加密的.https基于ssl. 一.安装apache和ssl模块1.安装apacheyum install httpd2.安装ssl模块yum ins ...