HTML之自定义tags

HTML之自定义tags

1、style

<style>
		#tag_main{
			overflow: hidden;
		}
		#tags{
			width: 100%;
			border-bottom: 1px solid #bdbdbd;
			font-size: 15px;
			padding-bottom: 5px;
			color: #5f5f5f;
		}
		#tags span{
			padding: 2px 5px 5px;
		}
		#tags .span_selected{
			color: #7ac143;
			border-bottom: 2px solid #269901;
		}
		#tag_content {
			transition: transform .5s ease-in-out;
			display: flex;
			flex-direction: row;
		}
		#tag_content div {
			flex-shrink: 0;
			width: 100%;
			transition: opacity .4s;
			opacity: 1;
			outline: 0;
		}
	</style>

2、内容

	<div id="tag_main">
		<div id="tags" value="0">
			<span name="0">人员同步</span>
			<span name="1">部门同步</span>
			<span name="2">考勤同步</span>
		</div>
		<div id="tag_content">
			<div content name="0">
			   0
			</div>
			<div content name="1">
			   1
			</div>
			<div content name="2">
			   2
			</div>
		</div>
	</div>

3、javaScript

	function showTags(tagName) {
		$('#tags').find('span').attr('class', '')
		var span = $('#tags').find('span[name=' + tagName +']')
		span.attr('class', 'span_selected')
		$('#tag_content').find('div[content]').attr('style', 'visibility: hidden;')
		var content = $('#tag_content').find('div[name=' + tagName +']')
		content.attr('style', 'visibility: visible;')
		$('#tag_content').attr('style', 'transform: translateX(-' +  Number(tagName) * 100  +'%) translateZ(0px);')
	}
	const tagName = $('#tags').attr('value');
	showTags(tagName)

	$('#tags span').each(function () {
		$(this).click(function () {
			const tagName = $(this).attr('name');
			showTags(tagName)
		})
	})