百度数智行业解决方案页面-客户案例标签页切换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文件内容是被压缩、格式混乱情况下可以点击文件展示主窗口左下角的{}按钮,可以美化、格式化当前文件样式。
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40146275/article/details/80694222
文章标签: javascript
个人分类: 笔记
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭