Question

我尝试对类别进行点击效果这是我的jquery代码：

$('document').ready(function() {
        $('.links a').click(function(e) {
            e.preventDefault();
            $('.links a').removeClass('active');
            $(this).addClass('active');
        });
    });

和html：

<div class ="links">
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4610?>'); return false;" class="" title="Мобильные телефоны">Мобильные телефоны</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4611?>'); return false;" class="" title="Планшеты">Планшеты</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4616?>'); return false;" class="" title="Монопады">Монопады</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4630?>'); return false;" class="" title="Наушники">Наушники</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4739?>'); return false;" class="" title="Медиаплееры">Медиаплееры</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4593?>'); return false;" class="" title="Аксессуары">Аксессуары</a>
    </div>

它的工作不正确这是一个例子： http://jsfiddle.net/fDZ97/ 我错过了什么？

Answer 1

我认为你要问的是切换

$(function() {
  var $links = $('#links a').click(function(e) {
    e.preventDefault();
    $links.not(this).removeClass('active');
    $(this).toggleClass('active');
  });
});

function Animate2id(id) {
    // your function stuff
}

.active {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="links">
  <a class="active" href="#" onClick="Animate2id('#box1');">Content 1</a>
  <a href="#" onClick="Animate2id('#box2');">Content 2</a>
  <a href="#" onClick="Animate2id('#box3');">Content 3</a>
</div>

Answer 2

这是您的工作代码：

$('document').ready(function() {
    $('#links a').click(function(e) {
        e.preventDefault();
        if($(this).hasClass("active")){
            $(this).removeClass('active');
        }else{
            $('#links a').removeClass('active');
            $(this).addClass('active');
        }  
    });
});

Here is the JSFiddle demo

根据我的理解，您只需要在点击时添加活动类，然后再次单击时将其删除。因此，上述内容适合您。

点击工作不正确，它会将类添加到标记，然后将其删除

2 个答案: