jq 点击切换选项

最新推荐文章于 2024-11-19 10:52:25 发布

原创最新推荐文章于 2024-11-19 10:52:25 发布 · 833 阅读

1 ·

CC 4.0 BY-SA版权

jq 效果专栏收录该内容

1 篇文章

订阅专栏

这篇博客通过HTML、CSS和jQuery展示了如何创建一个点击切换选项的功能。内容包括一个带有四个选项的div元素，点击其中一个选项，它将变为高亮状态，其他选项恢复原样。此外，还提供了一个名为`optionDL4Value`的函数，用于调整选项的间距。博主旨在通过记录这种小型功能，作为个人备忘录，以便日后快速参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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');
	});
	optionDL4Value();
	function optionDL4Value(){
		var obj = $('div.optionDL-4');
		$.each(obj,function(){
			var w = $(this).width();
			var c = $(this).children('div');
			w = (((w / 4) - c.outerWidth()) / 2) - 4;
			c.css('marginLeft',w + 'px');
			c.css('marginRight',w + 'px');
		});
	}
</script>

这是备忘录，回头写这些简单的东西其实是因为自己想写的时候突然忘了以前怎么写的，又要想一次逻辑，所以作为一种习惯，将每个小功能记录下来，作为备忘录给自己所使用。