JQuery是一種廣泛使用的JavaScript庫，可以幫助您輕松有效地編寫交互式網頁。在本文中，我們將介紹如何使用JQuery設置選中列表項的過渡特效。
首先，我們需要一個HTML文件，其中包含一個列表（即
- 標簽）。在本例中，列表包含一些項目名稱。
<!DOCTYPE html>
<html>
<head>
<title>JQuery選中列表項過渡特效</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.selected {
color: red;
background-color: yellow;
font-weight: bold;
font-size: 1.2em;
transition: all 0.5s ease;
}
</style>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<script>
$('ul li').click(function() {
$('ul li').removeClass('selected');
$(this).addClass('selected');
});
</script>
</body>
</html>上述代碼中，我們定義了一個CSS類“selected”，該類被應用于我們選中的列表項上。它設置了字體顏色，背景顏色，字體粗細和字體大小，并指定了一個過渡特效。這意味著，當我們單擊列表項時，它將平滑地轉換為我們定義的樣式。
JQuery代碼片段如下：當我們單擊列表項時，JQuery代碼被激活。首先，我們使用“removeClass”方法清除所有列表項的類名（即“selected”）。然后，我們使用“addClass”方法添加“selected”類到我們選中的列表項上，這將應用我們先前定義的CSS樣式。
$('ul li').click(function() {
$('ul li').removeClass('selected');
$(this).addClass('selected');
});我們使用JQuery提供的語法選擇了列表項（即“ul li”）。當我們單擊每個列表項時，這個代碼片段將一次被執行。現在，當我們瀏覽頁面并單擊列表項時，我們就可以看到過渡特效了！
上一篇css 上下div分區
下一篇css div和