jquery实现点击选项或者选项的描述文本到指定的元素
时间: 2023-12-03 13:47:26 浏览: 23
可以使用 jQuery 的 click() 方法,结合选择器和属性选择器实现。
以下是一个示例代码:
HTML:
```html
<div id="options">
<div class="option" data-target="#target1">选项1</div>
<div class="option" data-target="#target2">选项2</div>
<div class="option" data-target="#target3">选项3</div>
</div>
<div id="targets">
<div id="target1">目标1</div>
<div id="target2">目标2</div>
<div id="target3">目标3</div>
</div>
```
JS:
```javascript
$(document).ready(function() {
$('.option').click(function() {
var target = $(this).data('target');
$(target).addClass('active').siblings().removeClass('active');
});
});
```
CSS:
```css
#targets > div {
display: none;
}
#targets > div.active {
display: block;
}
```
以上代码会将选项的 data-target 属性指向的元素添加 active 类,同时移除其兄弟元素的 active 类,达到显示目标元素的效果。