原生js实现鼠标点击切换效果

最新推荐文章于 2024-07-09 12:30:00 发布

丿Love丨冷风

最新推荐文章于 2024-07-09 12:30:00 发布

阅读量3.1k

点赞数

分类专栏：前端代码文章标签： tab切换 js实现切换效果切换效果鼠标点击切换效果 js点击增加类名

本文链接：https://blog.csdn.net/qq_36764457/article/details/81458298

版权

本文通过一个实例对比jQuery和原生JavaScript实现tab切换效果，展示原生JS的实现过程，强调了虽然原生JS代码相对复杂，但对基础学习的重要性，有助于提升技能以适应更多工作需求。

摘要由CSDN通过智能技术生成

今天之所以写一篇关于js的代码实现，一方面是因为个人习惯用jquery编写代码，另一方面是因为github这个大平台抛弃了jquery。

Jquery是一个js库，极大简化js编程，使用方便，兼容性好，这篇文章就以一个例子来说明jq和js的编写差别。

首先我们看一下效果图：

先看下html，样式就不展示了，根据个人爱好自己定

用jquery代码实现下：

用jquery库时一定得记得引用jquery文件，不然浏览器不识别用jquery编写的代码，代码如下

$(function(){
    $('.searchTypeList').click(function(){
        $(this).addClass('choose').siblings().removeClass('choose');
    })
})

是不是很简单，而如果使用原生js写：

(function(){
    // 检查是否含有类名
	function hasClass(obj,cls){
		return obj.className.match(new RegE

关注

专栏目录