JavaScript implémente l'effet de changement d'étiquette d'onglet (exemple de code)

Cet article vous présentera comment utiliser CSS pour obtenir l'effet de numérisation de code QR. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Voici le code html

　　　　　　　<p id="main">
			<!--标题-->
			<ul id="tab">
				<li class="showed">tab1</li>
				<li>tab2</li>
				<li>tab3</li>
			</ul>
			<!--内容-->
			<p id="contents">
				<ul style="display:block;"><!--默认显示第一个-->
					<span>模块一</span>
				</ul>
				<ul>
					<span>模块二</span>
				</ul>
				<ul>
					<span>模块三</span>
				</ul>
			</p>
		</p>

Style CSS

           li{
               list-style:none;
           }
			#main {
				width: 600px;
				margin: 200px auto;
			}
			
			#tab {
				overflow: hidden;
				background: #000;
				border: 1px solid #000;
			}
			
			#tab li {
				float: left;
				color: #fff;
				height: 30px;
				cursor: pointer;
				line-height: 30px;
				padding: 0 20px;
			}
			
			#tab li.showed {
				color: #000;
				background: #ddd;
			}
			
			#contents {
				border: 1px solid #000;
				border-top-width: 0;
			}
			
			#contents ul {
				line-height: 150px;
				display:none;
				margin: 0 30px;
				padding: 10px 0;
			}

Ce qui suit est le JS

　　　　　　　　　　　　$(function() {
				window.onload = function() {
					var lis = $('#tab li');
					var uls = $('#contents ul');

					lis.click(function() {
						var li_selected = $(this); //选中的li分类
						var num = li_selected.index(); //相对于同胞元素的位置
						lis.removeClass(); //清空liCSS属性
						li_selected.addClass('showed'); //选中li添加属性
						uls.css('display', 'none'); //隐藏所有ul标签
						uls.eq(num).css('display', 'block'); //展示选中的li所对应的ul内容
					})
				}
			});

Rendu :

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique JavaScript

Manuel JavaScript en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!