jQuery点击变色的效果

jQuery 点击变色效果的代码实现，点击后文字所在方框的背景会变色，至于变成什么颜色，随你了，本代码的重点是效果的实现，并不局限于细节。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>接触角测定仪</title>
</head>
<style type="text/css">
        #t1,#t2,#t3,#t4{
            height:30px;
            width:50px;
            background-color:#33FFFF;
            float:left;
            margin-left:50px;
            text-align:center;
        }
        .active{background-color:#FC5A0A!important;}
    </style>

    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    <script type="text/javascript">
        jQuery(function(){
            var list = jQuery(‘#t1, #t2, #t3, #t4‘);
            list.click(function(){
                list.removeClass(‘active‘);
                jQuery(this).addClass(‘active‘);
                return false;
            });
        });
    </script>
    <body>
        <div id="t1"><a href="#">1</a></div>
        <div id="t2"><a href="#">2</a></div>
        <div id="t3"><a href="#">3</a></div>
        <div id="t4"><a href="#">4</a></div>
    </body>
</html>

jQuery点击变色的效果

时间： 2024-10-01 07:40:01

jQuery点击变色的效果的相关文章

如何使用jQuery实现隔行变色效果

如何使用jQuery实现隔行变色效果:隔行变色效果在网站有大量应用,尤其是在类似新闻列表这样的功能,对于行与行之间的区分有很大的好处,也提高了网站的人性化程度,虽然是个小功能,但是网站的流量都是从这样的小功能点点滴滴积累起来的.此效果可以使用CSS实现,但是由于现有浏览器对于CSS3支持度还不够好,所以使用js或者jQuery是不错的选择,下面就介绍一下如何使用jQuery实现此种效果.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head>

jquery点击缩略图切换视频播放的视频切换焦点图效果

一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器,每个缩图对应一个视频片段,视频电影站推荐使用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(".ma

Android实现按钮点击效果（第一次点击变色，第二次恢复）

1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="点击变色" android:background="@drawable/btn_st" android:gravity="center&

精品jquery多图层叠展示效果

精品jquery多图层叠展示效果jquery多图层叠展示效果,使用css和js完成,图片叠加效果,可点击上一张和下一张完成图片的切换特效,图片切换效果也非常的棒先上图: 精品jquery多图层叠展示效果,布布扣,bubuko.com

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <li class=&

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

点击变色

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.List" %> <%@ include file="/htss/commonJsp/commonHeadJsp.jsp"%> <%@ pa

jQuery简单表单验证效果

jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit