百度数智行业解决方案页面-客户案例标签页切换js实现——js脚本调试笔记_0

百度数智中的解决方案页面中有个标签页展示，研究原js文件时发现其js被混淆加密压缩过，不具可读性。

自己学习练习实现该标签页切换效果。

1.原页面：百度数智（大数据方向）-物联网行业解决方案

2.原js文件链接：index.js

3.实现效果的js完整代码

	$(document).ready(function(){
		$(".attribute-case-tabs .tabs li").click(function(){
			$(this).addClass("selected").siblings().removeClass("selected");	
			var index = $(this).index();
			$(".list.contents li").eq(index).addClass("selected").siblings().removeClass("selected");			
		});		
	});

*思路：因为CSS样式都是人家设置好的，只需要简单的给元素的class属性上添加上selected，即可自动改变样式。

*使用后代选择器选中一组元素（这里选中的是div中的li），然后每个li的click事件方法相同。

*click方法都是：给被点击的li添加selected属性，并同时移除其所有兄弟元素li上的selected属性。

4.chrome中使用控制台调试js代码技巧笔记：

• 直接在Console控制台输入框中完整输入script元素中的文本代码片段后回车，即可使chrome让js代码生效。
• Sources标签页中某个CSS、js文件内容是被压缩、格式混乱情况下可以点击文件展示主窗口左下角的{}按钮，可以美化、格式化当前文件样式。