当单击标题时改变列表中奇数项的背景颜色用jQuery
时间: 2024-10-23 09:14:33 浏览: 34
要使用jQuery实现当用户单击列表中的标题时,奇数项的背景色发生改变,你可以按照以下步骤进行:
1. 首先,确保在HTML中有一个包含标题的列表结构,如无序列表`<ul>`,每个条目包含一个`<li>`标签,并且每个条目的第一个元素可能是标题,比如`<h3>`或`<a>`。
```html
<ul id="myList">
<li>
<h3>标题1</h3>
<p>内容1</p>
</li>
<li>
<h3>标题2</h3>
<p>内容2</p>
</li>
<!-- 更多li... -->
</ul>
```
2. 使用jQuery,选中这个列表并监听`click`事件,针对每一项的标题(假设是`<h3>`元素):
```javascript
$(document).ready(function() {
$('#myList h3').click(function(event) {
// 获取当前被点击的li元素
var $li = $(this).closest('li');
// 判断是否是奇数行
if ($li.index() % 2 !== 0) {
// 如果是奇数行,更改背景颜色
$li.css('background-color', 'new-color-for-odd-items');
} else {
// 否则恢复默认背景色
$li.css('background-color', '');
}
});
});
```
这里的`new-color-for-odd-items`替换为你想要设置的新背景颜色。
阅读全文