jquery點擊新增刪除樣式

jquery是一種高效且常用的JavaScript庫，主要用於簡化HTML文件的遍歷和操作、事件處理、動畫效果的實現，前端開發者經常使用它來開發交互性強的網頁。在jQuery中新增和刪除樣式也是一項常見的任務，以下將介紹如何使用jQuery實作點擊新增和刪除樣式。

首先，我們需要使用HTML和CSS建立一個簡單的樣式清單。在HTML中，我們可以使用ul和li標籤建立一個簡單的無序列表，程式碼如下：

<ul class="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

接著，在CSS中，我們可以為清單項目指定樣式，以便在新增和刪除樣式時使用。程式碼如下：

.myList li{
  padding:10px;
  border:1px solid black;
  cursor:pointer;
}
.myList li.selected{
  background-color:gray;
  color:white;
}

現在，在JavaScript檔案中，我們可以使用jQuery來實作新增和刪除樣式。首先，我們需要使用jQuery選擇器找到所有清單項，並使用click()函數向它們新增點擊事件，程式碼如下：

$(document).ready(function(){
  $('.myList li').click(function(){
    //代码将在此处添加
  });
});

在點擊事件中，我們可以使用toggleClass()函數來新增或刪除.selected類，即已經在CSS中定義了的樣式。程式碼如下：

$(document).ready(function(){
  $('.myList li').click(function(){
    $(this).toggleClass('selected');
  });
});

現在，當點擊清單項目時，它們將切換被選取狀態的樣式。如果已經被選中，則將其取消選擇，反之亦然。此範例可在線上採用：https://codepen.io/alenaofficial/pen/zYGOYap

新增和刪除樣式就是這麼簡單，使用jQuery，我們可以輕鬆地實現動態樣式變化，從而提升用戶體驗。

以上是jquery點擊新增刪除樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！