如何从点击中删除颜色当点击另一个

因此，我有这3个蓝色圆圈服务于特定的导航目的，点击时应保持红色。当你点击另一个圆圈时，最初的红色圆圈会再次变成蓝色，点击的圆圈也会变成红色。如何从点击中删除颜色当点击另一个

<html> 
<head> 
<style type='text/css'> 

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;} 
a.link:hover {background-color: red} 
a.link.active {background-color: red;} 

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;} 
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;} 
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;} 

</style> 
</head> 

<body> 
<script type='text/javascript'> 
      $(function() { 
       $('a.link').click(function() { 
        $('a.link').removeClass('active'); 
        $(this).addClass('active'); 
       }) 
      }); 
     </script> 

    <div class="position1"><a class="link" href="#"></a></div> 
    <div class="position2"><a class="link" href="#"></a></div> 
    <div class="position3"><a class="link" href="#"></a></div> 
</body> 
</html>

香港专业教育学院做到了这一点，在过去，相同的脚本，工作但的同样的方式，这是通过使用文本不是定制的div形状。

我也想使第二圈点燃了从一开始就红通过使用代码 .eq(1).addClass('active');

这里是一个小提琴：https://jsfiddle.net/src6zf67/

来源

2015-09-03 Thomas Gijsels

它似乎在工作，小提琴没有包含jQuery。 – Stryner

你的例子不包括jQuery库。添加'' –

https://jsfiddle.net/src6zf67/4/

已经工作，但你应该onLOad jquery

Html：

<div class="position1"><a class="link" href="#"></a></div> 
    <div class="position2"><a class="link" href="#"></a></div> 
    <div class="position3"><a class="link" href="#"></a></div>

JS：

 $(function() { 
      $('a.link').click(function() { 
       $('a.link').removeClass('active'); 
       $(this).addClass('active'); 
      }) 
     });

的CSS：

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;} 
a.link:hover {background-color: red} 
a.link.active {background-color: red;} 

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;} 
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;} 
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}

来源

2015-09-03 19:16:25

我希望这有助于！祝你好运！ Here它在运动中。

// Grab all of the links and group them as a single jQuery object. 
var $links = $('a.link'); 
// Create an event that triggers when any of the of the links are clicked on. 
// Pass to it a data object with a single key $links 
// so you can access the other 
$links.on('click' , { $links : $links } , function (event) { 
    // Remove the class active from all of the links. 
    event.data.$links.removeClass('active'); 
    // Add the class active to the link we clicked on. 
    $(event.target).addClass('active'); 
});

来源

2015-09-03 19:41:23 hyphnKnight

如何从点击中删除颜色当点击另一个

回答

相关问题