快捷導(dǎo)航

jQuery實現(xiàn)的點擊按鈕改變樣式功能示例

更新時間：2018年07月21日 10:28:41 作者：金含

這篇文章主要介紹了jQuery實現(xiàn)的點擊按鈕改變樣式功能,涉及jQuery基于事件響應(yīng)的頁面元素樣式動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的點擊按鈕改變樣式功能。分享給大家供大家參考，具體如下：

1. css代碼：index4.css

@CHARSET "UTF-8";
.sd{
  font-weight: bold;
  color: black;
  background: red;
}

2. jsp代碼：index4.jsp

<%@ page language="java" import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath = request.getContextPath();
StringbasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>My JSP 'index4.jsp' startingpage</title>
  <meta http-equiv="pragma"content="no-cache">
  <meta http-equiv="cache-control"content="no-cache">
  <meta http-equiv="expires"content="0">
  <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
  <meta http-equiv="description"content="This is my page">
  <link rel="stylesheet"type="text/css" href="css/index4.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
 <table width="428"height="148" border="1"align="center" id="table">
 <tr>
 <td><div align="center">
 <label><input type="button"name="Submit" value="添加樣式" onclick="clicks()"/></label>
 <label><input type="button"name="Submit2" value="移除樣式" onclick="removeClicks()"/></label></div>
 </td>
 </tr>
 </table>
 <script type="text/javascript">
  function clicks(){
//  $("#table").toggleClass("sd");
  $("#table").addClass("sd");
  }
  function removeClicks() {
  $("#table").removeClass("sd");
  }
 </script>
 </body>
</html>

運行效果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試一下運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery的extend和fn.extend的使用說明
jQuery.fn.extend(object); 對jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實例可以使用這個“成員函數(shù)”。
2011-01-01
JQuery實現(xiàn)表格中相同單元格合并示例代碼
一定要注意如果從list的開始元素循環(huán)下去，remove掉一個元素后，有些元素就找不到了或者說不是要找的那個元素，感興趣的各位可以研究下哈
2013-06-06
6款經(jīng)典實用的jQuery小插件及源碼(對話框/提示工具等等)
jQuery擁有豐富多彩的插件，這些插件可以幫助你簡化很多的開發(fā)過程,下面介紹的6款實用jQuery小插件及源碼，感興趣的朋友可以參考下，希望本文可以幫助到你
2013-02-02
讀jQuery之十二刪除事件核心方法
使用jQuery刪除事件（或稱解除事件綁定）有三個函數(shù)：unbind、die和undelegate。這三個方法都依賴于未公開的jQuery.event.remove（后續(xù)使用.remove簡寫）。此為刪除事件的核心方法。
2011-07-07
基于JQuery和原生JavaScript實現(xiàn)網(wǎng)頁定位導(dǎo)航特效
本文通過實例代碼給大家介紹了基于JQuery和原生JavaScript實現(xiàn)網(wǎng)頁定位導(dǎo)航特效，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-04-04
JQuery表格拖動調(diào)整列寬效果(自己動手寫的)
當(dāng)鼠標(biāo)停留在表頭邊框線上時，鼠標(biāo)會變成表示左右拖動的形狀，接著拖動鼠標(biāo)，會在表格中出現(xiàn)一條隨鼠標(biāo)移動的豎線，最后放開鼠標(biāo)，表格列寬會被調(diào)整
2014-09-09
jquery實現(xiàn)input框獲取焦點的簡單實例
下面小編就為大家?guī)硪黄猨query實現(xiàn)input框獲取焦點的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
easyUI 實現(xiàn)的后臺分頁與前臺顯示功能示例
這篇文章主要介紹了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能,結(jié)合實例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關(guān)操作技巧及注意事項,需要的朋友可以參考下
2020-06-06
jQuery簡單實現(xiàn)對數(shù)組去重及排序操作實例
這篇文章主要介紹了jQuery簡單實現(xiàn)對數(shù)組去重及排序操作,結(jié)合實例形式分析了jQuery中unique方法進(jìn)行數(shù)組去重及sort方法排序的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
jQuery一鍵移除使前端項目脫離對它的依賴
這篇文章主要為大家介紹了jQuery一鍵移除使項目脫離對它的依賴使用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04