我们都知道现在大多数网站都有切换标签页的效果(就是一个区块，鼠标悬停在上面不同的版块上，这个区块里的内容页面发生变化，可以说现在互联网上到处都是)，但是百度快照没有这个效果，那么那些标签页里的内容会被收录吗？今天就来讨论一下这方面。
首先说一下这个标签切换效果是怎么从网站上来的。这种制表符切换效果是通过使用。根据实现方法，一般有两种方法：一种是直接设置导航元素的属性，在鼠标经过导航元素时触发目标元素的显示内容变化效果，另一种是完全控制导航元素的属性。这两种方法的共同点是，它们都有一个控制目标元素内容的显示和隐藏的功能。这两种方法没有根纯手工js事件切换热门博客列表本区别，只有页面代码样式分离的区别。
获取目标元素的内容也有两种方式，即改变目标元素的显示内容，对SEO的影响完全不同。
第一种方法是所有目标元素获取内容，按照导航元素的命名顺序显示。例如，如果导航元素是1、2和3，那么目标元素根据顺序也是1、2和3，并且已经获得了每个目标元素的内容，除了初始显示属性2和3被设置为，然后显示属性2和3被完全控制。当鼠标悬停在导航元素2上时，1和3的显示属性都是，这种方法的优点是所有内容都可以被蜘蛛抓取(蜘蛛直接读取源代码，不考虑页面样式属性，隐藏的元素也可以读出)，缺点是页面大小会比较大，尤其是当标签页中有大量图片时，会影响页面的加载速度。
另一种方法与上面的完全不同。导航元素仍然是1、2和3，而目标元素只有一个。那么目标元素的内容从何而来呢？以一种叫做ajax的方式。在这种方法中，通常从开始就只完成目标元素的第一个内容。当鼠标悬停在导航元素上时，触发ajax执行函数，从服务器端获取目标元素需要显示的其他内容。例如，当鼠标悬停在导航元素2上时，会触发ajax函数从服务器端获取2的内容来填充目标元素。这样，可以切换和显示目标元素内容。这种方法的优点是需要加载的页面大小较小，只有在需要获取标签内容时才会从服务器读取对应的标签内容，缺点是完全不适合SEO。大家都知道搜索引擎蜘蛛不冷。当目标元素的内容在当前页面中不存在，需要通过javascript获取时，蜘蛛无法抓取目标元素的内容。
从上面的描述可以看出，快照中的tab切换是否显示出对实际SEO效果的影响，其实与网站本身采用的tab切换方式有关，而蜘蛛本身并不抓取javascript，所以tab切换的效果肯定无法在快照中实现，只有网站本身采用的tab切换方式的不同才会对SEO产生影响。好在主流网站系统一般不使用ajax做标签切换显示效果，所以你一般不用担心，但是对于一些小众网站处理系统(大多是IDC自己开发的)，你就需要注意了，你需要看源代码来识别你的标签切换方式是否会影响SEO。
原生js 实现一个标签样式之间的切换
就是实现上面的一个小演示，在实际工作中还是用的比较多的
原理很简单，即通过设置活动状态样式，然后不断切换到用户单击的元素上的其他元素，类名被删除
事实上，有两种方法可以在本地完成
以上是通过ulli标签展开的
你可以把点击事件放在ul或li上，看看你是否喜欢。
但是，建议绑定到父元素，并通过事件委托来判断它
第一条路
(e){ if(){((){ if(){ } } e . target . ClassNameActiVe } }
然而，上述方法直接清空元素的类名显然是有风险的。如果还有其他类名，显然是不合适的。类名“类名”也直接覆盖了前面的类名。
这时，我们应该用第二种方式来找乐子
choice number(e){ if(e . target . nodename span){ varolidocument . query selectorall(。user _ listlifor(Variatemofoli){ if(item . class list . contains(active)){ item . class list . remove(active } }//将类名e.target.classlist.add (active})添加到父节点。
通过classList添加和删除类名比较好，减少风险也很好玩不是吗
有些童鞋可能不太懂classList。给权威的机票
注意我对前端知识的不断更新
相关阅读
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除
标签： #纯手工js事件切换热门博客列表