JavaScript点导航

如何对Javascript或jQuery进行编码，以便当我单击一个点时，该点会得到一个活动类，但之前的点类会被删除

$('.dot').on('click', function() {
    $('.dot.active').removeClass('active');
    $(this).addClass('active');
});

HTML:

<div class="dotnav">
    <div class="dot active" title="Sign Up"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="helloup"></div>
</div>

.dotnav {
    left: 40px;
    position: absolute;
    top: 50%;
    z-index: 9999;
    display: block;
    /*-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50);*/
}

.dot {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 2px solid #CCCCCC;
    display: block;
    margin-top: 10px;
    cursor: pointer;
    vertical-align;
    baseline;
}

.dot:hover {
    border: 2px solid #999999;
    background-color: #C9931E;
}

.active {
    background-color: #C9931E;
}

---

如何对Javascript或jQuery进行编码，以便当我单击一个点时，该点会得到一个活动类，但之前的点类会被删除？

您可以这样做：

$('.dot').on('click', function() {
    $('.dot.active').removeClass('active');
    $(this).addClass('active');
});

$('.dot').click(function(){
    this.className = 'active';
});

---

单击时，删除活动类，然后在单击的点上添加

active

。大概是这样的：

$('.dot').click(function () {
    $('div.active').removeClass('active');
    $(this).toggleClass('active');
});

jFiddle处理原始HTML和CSS：