原生js如何写点击切换展示不同内容

javascript如何写点击切换展示不同内容

图片展示：如下图

style部分

代码如下（示例）：

			.tab ul li {
				color: #000000;
			}
			.tab ul li.TabActive {
				color: #ff0000;
			}
			.content ul li {
				display: none;
			}
			.content ul li.ContActive {
				display: block;
			}

html部分

代码如下（示例）：

<!-- 切换按钮部分 -->
		<div class="tab">
			<ul>
				<li class="TabActive">标题一</li>
				<li>标题二</li>
				<li>标题三</li>
				<li>标题四</li>
			</ul>
		</div>
		<!-- 被切换内容部分 -->
		<div class="content">
			<ul>
				<li class="ContActive">内容一</li>
				<li>内容二</li>
				<li>内容三</li>
				<li>内容四</li>
			</ul>
		</div>

script部分

代码如下（示例）：

<script type="text/javascript">
			window.onload = function() {
				// 进入就加载方法
				tabClick(); //切换方法
			}

			function tabClick() {
				var tab = document.querySelectorAll(".tab ul li"); // 获取tab所有 li
				var cont = document.querySelectorAll(".content ul li") //获取content所有 li
				if (tab && cont) { //严格模式 取到tab 和 cont 之后再进行其他
					for (var i = 0; i < tab.length; i++) { //给每一个tab添加点监听点击事件
						addHover(i);
					}
					//添加点击监听
					function addHover(i) {
						tab[i].addEventListener('click', function() { //点击切换
							// tab[i].addEventListener('mouseover', function() {//悬浮切换
							setTabClass(i);
							setContClass(i)
						});
					}
					// 切换按钮的事件
					function setTabClass(num) {
						// 移出所有的TabActive名称
						for (var i = 0; i < tab.length; i++) {
							tab[i].classList.remove("TabActive");
						}
						// 点击的哪个给哪个添加TabActive
						tab[num].classList.add("TabActive");
					}
					// 切换内容的事件
					function setContClass(num) {
						// 移出所有的ContActive名称
						for (var i = 0; i < cont.length; i++) {
							cont[i].classList.remove("ContActive");
						}
						// 点击的哪个给哪个添加ContActive
						cont[num].classList.add("ContActive");
					}
				}
			}
		</script>

总结

实现原理：利用点击切换，实现添加不同的class名称来控制显示和隐藏