<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<script src="jquery-3.2.1.min.js"></script>
<style>
.index{background:#000;}
.w400{width:400px;}
.optionDL-4>div{float:left;border:1px solid #000;color:#999;padding:2px 10px;margin:8px 10px;}
.optionDL-4>.index{color:#fff;background:#000;box-shadow:5px 5px 5px #444;}
.optionDL-4>div:hover{color:#fff;background:#000;box-shadow:5px 5px 5px #444;}
</style>
</head>
<body>
<div class="optionDL-4 w400">
<div class="index">一</div>
<div>二</div>
<div>三</div>
</div>
</body>
</html>
<script>
$('.optionDL-4').children().click(function(){
$(this).parent().children('.index').removeClass('index');
$(this).addClass('index');
});
jq 点击切换选项
最新推荐文章于 2023-08-29 19:01:40 发布
这篇博客通过HTML、CSS和jQuery展示了如何创建一个点击切换选项的功能。内容包括一个带有四个选项的div元素,点击其中一个选项,它将变为高亮状态,其他选项恢复原样。此外,还提供了一个名为`optionDL4Value`的函数,用于调整选项的间距。博主旨在通过记录这种小型功能,作为个人备忘录,以便日后快速参考。
摘要由CSDN通过智能技术生成