单击另一个时如何从div中删除颜色答案

【问题标题】：How to remove color from div when clicking another单击另一个时如何从div中删除颜色
【发布时间】：2015-09-04 03:41:23
【问题描述】：

所以我有这 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/

【问题讨论】：

它似乎工作正常，小提琴只是没有包含 jQuery。
您的示例不包括 jQuery 库。添加<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

标签： javascript jquery html css

【解决方案1】：

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

它一直在工作，但你应该加载 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;}

【讨论】：

【解决方案2】：

我希望这会有所帮助！祝你好运！ 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' );
} );

【讨论】：