百度数智中的解决方案页面中有个标签页展示,研究原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文件内容是被压缩、格式混乱情况下可以点击文件展示主窗口左下角的{}按钮,可以美化、格式化当前文件样式。