jQuery：需要添加Class＆＃34; active＆＃34;

Question

这是我的代码，

详情： 我有2个div，当我点击（第一个链接）所以（第一个细节）打开。 然后我点击（第二个链接）所以（第二个细节）打开。 现在我需要点击（第一个链接），所以在第一个链接中添加类active， 当我点击（第二个链接）和现在（第一个链接）活动类删除并添加活动类（第二个链接）。当我再次点击（第二个链接）然后激活类删除。

这是我点击的代码。我需要添加＆＃34; Active＆＃34; <a>标记中的类。通过jQuery。我怎样才能添加jquery？

Codepen Fiddle

<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');