JS如何把a链接里的 class 值修改成另外一个值

例如：
<a class="xvideo-thumbnail-mask hide" target="_blank" href="http://127.0.0.1">2222222<span class="xyvideo-icon xyvideo-icon-video"></span></a>

光标移动到这个A链接时，a的class值变成

<a class="xvideo-thumbnail-mask" target="_blank" href="http://127.0.0.1">2222222<span class="xyvideo-icon xyvideo-icon-video"></span></a>

，就是 class里面的 hide 去掉了

就拿这个例子，JS 该怎么去写？

12 个解决方案

#1

本帖最后由 showbo 于 2016-09-26 13:47:34 编辑

换个思路，xvideo-thumbnail-mask添加hide样式的值，然后a添加hover伪类，覆盖掉hide的值，这样完全不需要js

#2

引用 1 楼 showbo 的回复:

换个思路，xvideo-thumbnail-mask添加hide样式的值，然后a添加hover伪类，覆盖掉hide的值

hover 我也想过，不过a标签里的 span 后面还要做跟 a 标签一样的操作，所以 hover 不合适用，只能用JS 来改变

<script>
function changeBackColor(obj)
{
for(var i=1;i<=5;i++)
{
document.getElementById("w"+i).className="xvideo-thumbnail-mask";
}
document.getElementById(obj).className="xvideo-thumbnail-mask hide";
}
</script>

但 a标签里做 id="w1" class=“xvideo-thumbnail-mask hide” 失败仍然光标移动到 a 链接时 class的值不会变成 xvideo-thumbnail-mask

#3


$(".xvideo-thumbnail-mask").hover(function(){
    if($(".xvideo-thumbnail-mask").hasClass("hide")){
        $(".xvideo-thumbnail-mask").removeClass("hide");
    }else{
        $(".xvideo-thumbnail-mask").addClass("hide");
    }
});

$(".xvideo-thumbnail-mask")这个你自己换成对应的吧 jquery写的

#4

Quote: 引用 3 楼 u011376884 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
$(".xvideo-thumbnail-mask hide").hover(function(){
    if($(".xvideo-thumbnail-mask hide").hasClass("hide")){
$(".xvideo-thumbnail-mask hide").removeClass("hide");
    }else{
$(".xvideo-thumbnail-mask").addClass("hide");
    }
});
</script>
</head>

<body>
<a class="xvideo-thumbnail-mask hide" target="_blank" href="http://127.0.0.1">22222222222222222222222<span class="xyvideo-icon xyvideo-icon-video"></span></a>
</body>
</html>

光标移动的到 A链接时移除 hide ，光标离开 A链接时   自动添加回  hide

我这样写  测试时没效果呢，是我写错了吗

#5

引用 4 楼 myron4048 的回复:

$(function(){
//XXXX
});
需要让那段代码在页面加载之后在运行

#6

引用 5 楼 u011376884 的回复:

Quote: 引用 4 楼 myron4048 的回复:

已经添加了，不过审核元素还是没有效果。。要不劳驾您花点时间帮写一下把

#7

怎么不适用


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
a.xvideo-thumbnail-mask:hover {
	background-color: #f00;
}
a.xvideo-thumbnail-mask:hover span {
	background-color: #ff0;
}
</style>
</head>
<body>


<a class="xvideo-thumbnail-mask" target="_blank" href="http://127.0.0.1">2222222<span class="xyvideo-icon xyvideo-icon-video">33333333333333</span></a>


</body>
</html>

#8

引用 6 楼 myron4048 的回复:

Quote: 引用 5 楼 u011376884 的回复:

Quote: 引用 4 楼 myron4048 的回复:

已经添加了，不过审核元素还是没有效果。。要不劳驾您花点时间帮写一下把

才看见需要引入jquery.js
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

#9

引用 6 楼 myron4048 的回复:

已经添加了，不过审核元素还是没有效果。。要不劳驾您花点时间帮写一下把


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$(".xvideo-thumbnail-mask hide").hover(function(){
    if($(".xvideo-thumbnail-mask hide").hasClass("hide")){
 $(".xvideo-thumbnail-mask hide").removeClass("hide");	
    }else{
 $(".xvideo-thumbnail-mask").addClass("hide");
    }
});
});

</script> 
</head>

<body>
<a class="xvideo-thumbnail-mask hide" target="_blank" href="http://127.0.0.1">22222222222222222222222<span class="xyvideo-icon xyvideo-icon-video"></span></a>
</body>
</html>

#10

Quote: 引用 7 楼 jslang 的回复:

单单背景以及文字那就简单了，用你说的 hover就行了，其中span 还要涉及到图形显示的，光标不移动到该处，就不显示图片，

a 链接和 span 都要跟随变化。。

用JS 能写出 a的来就能好处理 span的图形问题了

#11

a:hove{
写光标移动上去显示的样式
}

#12

卧槽，这个的实现方式太多了，一眼就能看出来好几个
1.
mouseEnter e.removeClass('hide')
mouseOut:e.addClass('hide')
2. hide做成xvideo-thumbnail-mask伪类
3.span:hover hide样式覆盖
4.div:hover hide样式覆盖
5.div hover =>remove or add class
6......

#1

本帖最后由 showbo 于 2016-09-26 13:47:34 编辑

换个思路，xvideo-thumbnail-mask添加hide样式的值，然后a添加hover伪类，覆盖掉hide的值，这样完全不需要js

#2

引用 1 楼 showbo 的回复:

换个思路，xvideo-thumbnail-mask添加hide样式的值，然后a添加hover伪类，覆盖掉hide的值

#3


$(".xvideo-thumbnail-mask").hover(function(){
    if($(".xvideo-thumbnail-mask").hasClass("hide")){
        $(".xvideo-thumbnail-mask").removeClass("hide");
    }else{
        $(".xvideo-thumbnail-mask").addClass("hide");
    }
});

$(".xvideo-thumbnail-mask")这个你自己换成对应的吧 jquery写的

#4

Quote: 引用 3 楼 u011376884 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
$(".xvideo-thumbnail-mask hide").hover(function(){
    if($(".xvideo-thumbnail-mask hide").hasClass("hide")){
$(".xvideo-thumbnail-mask hide").removeClass("hide");
    }else{
$(".xvideo-thumbnail-mask").addClass("hide");
    }
});
</script>
</head>

<body>
<a class="xvideo-thumbnail-mask hide" target="_blank" href="http://127.0.0.1">22222222222222222222222<span class="xyvideo-icon xyvideo-icon-video"></span></a>
</body>
</html>

光标移动的到 A链接时移除 hide ，光标离开 A链接时   自动添加回  hide

我这样写  测试时没效果呢，是我写错了吗

#5

引用 4 楼 myron4048 的回复:

$(function(){
//XXXX
});
需要让那段代码在页面加载之后在运行

#6

引用 5 楼 u011376884 的回复:

Quote: 引用 4 楼 myron4048 的回复:

已经添加了，不过审核元素还是没有效果。。要不劳驾您花点时间帮写一下把

#7

怎么不适用


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
a.xvideo-thumbnail-mask:hover {
	background-color: #f00;
}
a.xvideo-thumbnail-mask:hover span {
	background-color: #ff0;
}
</style>
</head>
<body>


<a class="xvideo-thumbnail-mask" target="_blank" href="http://127.0.0.1">2222222<span class="xyvideo-icon xyvideo-icon-video">33333333333333</span></a>


</body>
</html>

#8

引用 6 楼 myron4048 的回复:

Quote: 引用 5 楼 u011376884 的回复:

Quote: 引用 4 楼 myron4048 的回复:

已经添加了，不过审核元素还是没有效果。。要不劳驾您花点时间帮写一下把

才看见需要引入jquery.js
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

#9

引用 6 楼 myron4048 的回复:

已经添加了，不过审核元素还是没有效果。。要不劳驾您花点时间帮写一下把


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$(".xvideo-thumbnail-mask hide").hover(function(){
    if($(".xvideo-thumbnail-mask hide").hasClass("hide")){
 $(".xvideo-thumbnail-mask hide").removeClass("hide");	
    }else{
 $(".xvideo-thumbnail-mask").addClass("hide");
    }
});
});

</script> 
</head>

<body>
<a class="xvideo-thumbnail-mask hide" target="_blank" href="http://127.0.0.1">22222222222222222222222<span class="xyvideo-icon xyvideo-icon-video"></span></a>
</body>
</html>

#10

Quote: 引用 7 楼 jslang 的回复:

单单背景以及文字那就简单了，用你说的 hover就行了，其中span 还要涉及到图形显示的，光标不移动到该处，就不显示图片，

a 链接和 span 都要跟随变化。。

用JS 能写出 a的来就能好处理 span的图形问题了

#11

a:hove{
写光标移动上去显示的样式
}

秒客网

JS如何把a链接里的 class 值修改成另外一个值

12 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

相关文章