这段时间做一个小网站发现有时候特别需要点击不同的按钮去加载不同的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. UVa1592_数据库

    #include<iostream> #include<cstdio> #include<vector> #include<utility> #incl ...

  2. Javaweb---Servlet过滤器

    Servlet过滤器从字面上的字意理解为景观一层次的过滤处理才达到使用的要求,而其实Servlet过滤器就是服务器与客户端请求与响应的中间层组件,在实际项目开发中Servlet过滤器主要用于对浏览器的 ...

  3. LeetCode : 93. Restore IP Addresses

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABZ4AAAHUCAYAAAC6Zj2HAAAMFGlDQ1BJQ0MgUHJvZmlsZQAASImVlw

  4. 1.1 STL 概述

    综述   STL = Standard Template Library,标准模板库,惠普实验室开发的一系列软件的统称.它是由Alexander Stepanov.Meng Lee和David R M ...

  5. javascript - 浏览器对象

    Navigator对象 弹出窗口 Cookies Browser Objects 参考手册 参考手册描述了每个对象的属性和方法,并提供了在线实例. Window 对象 Navigator 对象 Scr ...

  6. 数据结构和算法 – 10.集合

    集合: 联合.交叉.差异.子集 using System; using System.Collections; using System.Collections.Generic; using Syst ...

  7. C#回顾 – 4.IEnumerable 集合

         

  8. 设计模式学习之外观模式(Facade,结构型模式)(8)

    1.什么是外观模式为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用 2.为什么要使用外观模式在软件开发系统中,客户程序经常会与复杂系统的内 ...

  9. CentOS FTP基于虚拟用户的配置

    详细可以看:http://www.linuxidc.com/Linux/2013-12/94242.htm 所谓虚拟用户就是没有使用真实的帐户,只是通过映射到真实帐户和设置权限的目的.虚拟用户不能登录 ...

  10. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...