JS:页内元素实现点击切换相关元素内容--不用vue一样可以实现active class

 

有这样一个需求，当点击ul li元素，则将其设置为active item并显示相关元素内容，如图，点击个人资料，右边显示基本信息等内容，其他则隐藏。而点击账号设置，则显示修改密码等内容。大概就是这么个意思。好，现在先总结知识点，再上代码。

 

当然，大概的一个htm元素结构，类似这样

<div class="user_defined_class">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

1 自调用函数 $(function(){});  

只有在页面刷新时调用一次，点击li元素时并不调用。所以用它来干嘛呢？用来刷新时重置上次点击的li元素的下标，以此来显示刷新后把哪个li元素的class设置为active。

2 在某元素内部遍历其子元素方法

方法很多，这里介绍两种方法，一是遍历同名标签且未添加用户定义类的元素，一是遍历元素标签名不同(或者相同)且含有用户定义类的元素。

(1) 遍历同名标签且未添加用户定义类的元素

比如上面的需求里，需要遍历li元素，寻找当前被设置成active类的li，怎么办呢，each循环。

$(".user_defined_class ul").find("li").each(function(){
    var index = $(this).index();          //本次循环的li元素下标(下标从0开始计数)
    var $(this).removeClass("active");    //删除本次循环到的li元素的active类
});

(2) 遍历元素标签名不同(或者相同)且含有用户定义类

类似这样,类名为father的父元素包含三个子元素，这三个子元素可能还有子孙，但是，我们要做的是，找到father的子元素(标签名可以是div可以是p)，根据某个规则(比如根据哪个li是active的)进行遍历，显示或隐藏它们。

<div class="father">
    <div class="first"></div>
    <div class="second"></div>
    <p   class="third"></div>
</div>

这时，需要用到伪类选择器的一个规则。比如 father>:nth-child(1)，其中：

大于号 :表示选择结果只在father类的子类里，不会往下再选更低级的孙类了

:nth-child(1) :表示选择的是father所在元素的第1个子元素，下标最小从1开始，所以和each需要区分下。father>:nth-child(1)意思就是选择的 <div class="first"></div>

3 鼠标点击事件

在元素的点击事件里加入自定的函数，这个不用说了

<li onclick="MyFunc(this,arg_list)"></li>
<script>
function MyFunc(th,arg){
    // do something you like when this li was clicked
}
</script>

4 sessionStorage 客户端会话存储

当客户端和服务器进行第一次通信时，会建立会话，存储在客户端。它比cookie更安全，因为主要的信息都在服务端，客户端存储的是一些不那么重要的数据，比如就像我们这里的，记录一次页面点击，点了哪个li元素。

它提供了三个常用接口

setItem("KeyName","StringValue")

getItem("KeyName")

removeItem("KeyName")

<script>
    window.sessionStorage.setItem("active","1");
    var item= window.sessionStorage.getItem("active");
    window.sessionStorage.removeItem("active");
</script>

当然，这样写毫无意义，因为没有和li元素关联，我们应该放在点击事件里，比如现在有个需求，页面初始化时，显示father类所在元素的  类为first的子元素，那么，我们只需要在子调用函数里，设置第一个li元素为当前active的元素就好，如下

<script>
$(function(){
    $(".user_defined_class ul").find("li").each(function(){
        var item =  window.sessionStorage.getItem("active");
        if(item == null){
           $(this).addClass("active");
           $(".father>:nth-child('+ 1 +')").show();
        }  
    });
});
</script>

当然，这里会有问题，比如上面点击的是second类所在的元素，刷新后，岂不是first和second都被添加为active的了吗？这时候就要你再每次点击时，移除所有的li元素的active类，并隐藏所有对应的father里的内容，好了，大概意思就是这样，控制切换部分的源码如下

 

         // 刷新页面时清空所有活动的li和显示的content，然后根据刷新前的记录重新设置
         $(function(){
			$(".container-left ul").find("li").each(function(){
				unselectContent(this,$(this).index());	// 清空右侧内容显示(index()>=0)
			});
			var item_show = window.sessionStorage.getItem("item-active");
			if(item_show == null || item_show == "undefined")
				selectContent(1); 	//页面刷新时默认选择首个li
			else
				selectContent(parseInt(item_show));
			//console.log(parseInt(item_show));	
		});

		// 点击左侧导航条 动态切换li为active
		function selectPart(ths,index){
			$(".container-left ul").find("li").each(function(){
				unselectContent(this,$(this).index());	// 清空右侧内容显示(index()>=0)
			});
			$(ths).addClass("item-active");	// 添加左侧导航条选中状态
			selectContent(index);	// 添加右侧内容显示
			window.sessionStorage.setItem("item-active",index);
		}
		// 控制右侧内容:显示  p>:nth-child(n)表示p元素的第n(n>=1)个子元素
		function selectContent(index){
			$(".container-left ul>:nth-child(" + index + ")").addClass("item-active");
			$(".container-right>:nth-child(" + index + ")").show();
		}
        // 控制右侧内容:隐藏
		function unselectContent(ths,index){
			$(ths).removeClass("item-active");
			$(".container-right>:nth-child(" + index + ")").hide();
		}

全部手写，如果有用，点个赞哦~