jQuery：需要添加“活动”类

Question

这是我的代码，

详细信息：我有2个div，当我单击（第一个链接）时，打开（第一个详细信息）。 然后我单击（第二个链接），以便打开（第二个详细信息）。 现在我需要在我单击（第一个链接）时在第一个链接中添加active类，并且当我单击（第二个链接）并现在（第一个链接）活动类时，删除并添加活动类（第二个链接）。 当我再次单击（第二个链接），然后删除活动类。

这是我单击的代码。 我需要在<a>标记中添加“活动”类。 通过jQuery。 如何添加jQuery？

密码笔小提琴

<style>
   /* product-row */
   .product-row{ clear:both; padding:10px 0 20px 0;}
   .product-row .product-main{ width:225px; float:left; margin:0 60px 25px 0;}
   .product-row .product-main .product-img{ height:80px; text-align:center; margin:0 auto;}
   .product-row .product-main .product-title h2 a{ font-family:'Roboto Condensed'; font-size:20px; color:#343434; clear:both; display:block; text-align:center; line-height:42px; position:relative; text-transform:uppercase; margin:10px 0 0 0;}
   .product-row .product-main .product-title h2 a:hover{ background:url(../images/product-title-hover.png) bottom center no-repeat;}
   .product-row .product-detail{ clear:both; height:150px; background:#e2ddcf;}
   .det1, .det2, .det3, .det4, .det5, .det6, .det7, .det8{ display:none;}
   .product-row .product-detail .product-detail-row{ clear:both; padding:30px 0 0 30px;}
   .product-row .product-detail .product-detail-row .product-detail-main{ width:540px; float:left;}
   .product-row .product-detail .product-detail-row .product-detail-main ul{ margin:0; padding:0px; list-style:none;}
   .product-row .product-detail .product-detail-row .product-detail-main ul li{ font-family:'Tahoma'; font-size:14px; color:#686868; clear:both; padding:0 0 0 25px; background:url(../images/valores-text-bg.png) left 5px no-repeat; line-height:20px; margin:0 0 15px 0; height:25px;}
</style>
<div class="product-main">
                <div class="product-img"><a href="#"><img src="images/product-img-4.png" alt=""></a></div><!-- .product-img -->
                <div class="product-title"><h2><a href="#" id="prod1">FUSÕES E AQUISIÇÕES</a></h2></div><!-- .product-title -->
            </div><!-- .product-main -->
            <div class="product-main">
                <div class="product-img"><a href="#"><img src="images/product-img-3.png" alt=""></a></div><!-- .product-img -->
                <div class="product-title"><h2><a href="#" id="prod2">FUSÕES E AQUISIÇÕES</a></h2></div><!-- .product-title -->
            </div><!-- .product-main -->
            <div class="product-main">
                <div class="product-img"><a href="#"><img src="images/product-img-2.png" alt=""></a></div><!-- .product-img -->
                <div class="product-title"><h2><a href="#" id="prod3">FUSÕES E AQUISIÇÕES</a></h2></div><!-- .product-title -->
            </div><!-- .product-main -->
            <div class="product-main">
                <div class="product-img"><a href="#"><img src="images/product-img-5.png" alt=""></a></div><!-- .product-img -->
                <div class="product-title"><h2><a href="#" id="prod4">avaliação de empresas</a></h2></div><!-- .product-title -->
            </div><!-- .product-main -->
            <div class="product-detail det1 cf">
                <div class="product-detail-row cf">
                    <div class="product-detail-main">
                        <ul>
                            <li>1</li>
                            <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                    <div class="product-detail-main">
                        <ul>
                            <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li>
                            <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                </div><!-- .product-detail-row -->
            </div><!-- .product-detail -->
            <div class="product-detail det2 cf">
                <div class="product-detail-row cf">
                    <div class="product-detail-main">
                        <ul>
                            <li>2</li>
                            <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                    <div class="product-detail-main">
                        <ul>
                            <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li>
                            <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                </div><!-- .product-detail-row -->
            </div><!-- .product-detail -->
            <div class="product-detail det3 cf">
                <div class="product-detail-row cf">
                    <div class="product-detail-main">
                        <ul>
                            <li>3</li>
                            <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                    <div class="product-detail-main">
                        <ul>
                            <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li>
                            <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                </div><!-- .product-detail-row -->
            </div><!-- .product-detail -->
            <div class="product-detail det4 cf">
                <div class="product-detail-row cf">
                    <div class="product-detail-main">
                        <ul>
                            <li>4</li>
                            <li>Identificação e abordagem de metas de aquisição adequadas em nível nacional e internacional;</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                    <div class="product-detail-main">
                        <ul>
                            <li>Prospecção de ofertas que melhor se adaptem aos objetivos estratégicos da<br> empresa;</li>
                            <li>Assessoria no desenvolvimento de um plano personalizado e estratégico de <br>negócios.</li>
                        </ul>
                    </div><!-- .product-detail-main -->
                </div><!-- .product-detail-row -->
            </div><!-- .product-detail -->
<script>
$(function () {

   jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
    }

    //if (detailedDiv.is(':visible')) detailedDiv.hide();
    //else detailedDiv.show();
    $(this).toggleClass('active');
    e.preventDefault()
});

});
</script>

Answer 1

您的指示很难遵循，但我认为这可能是您所追求的...

var $prodLinks = $('a[id^="prod"]');
$prodLinks.on("click", function() {   //On the click of any link

    $prodLinks.not(this).removeClass("active");   //Remove active from all other links
    $(this).toggleClass("active");   //Toggle the active class for the clicked link

});

Answer 2

您的意思是这样吗：有点丑陋，但可能会有所帮助。

$('.product-main .product-title a').on('click', function(){

    $(this).addClass('active');        
    $(this).parents('.product-main')                    
            .siblings()
            .children('.product-title').children('h2').children('a')
            .removeClass('active');

});

Answer 3

您可以使用jQuery切换功能来切换链接上的类。

jQuery('a[id^="prod"]').on('click', function (e) { jQuery(this).toggleClass('active'); ...

Answer 4

只需在您的元素上添加一个事件onClick并将此代码执行到：

$('#prod1').addClass('Active');