Question

下面的代码我将用于更多感谢一个标签（有类似标签[i]的东西），我认为最好有一个循环：

<script>
    $(document).ready(function() {
        $('.nav-tabs1 > li > a').click(function(event){
            event.preventDefault();//stop browser to take action for clicked anchor

            var active_tab_selector = $('.nav-tabs1 > li.active > a').attr('href');  //get displaying tab content jQuery selector               
            var actived_nav = $('.nav-tabs1 > li.active'); //find actived navigation and remove 'active' css
            actived_nav.removeClass('active');
            $(this).parents('li').addClass('active'); //add 'active' css into clicked navigation
            $(active_tab_selector).removeClass('active'); //hide displaying tab content
            $(active_tab_selector).addClass('hide');

            var target_tab_selector = $(this).attr('href'); //show target tab content
            $(target_tab_selector).removeClass('hide');
            $(target_tab_selector).addClass('active');
        });
    });
</script>

并在HTML中看起来像：

<!-- item 1 Starts -->           
                    <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                            <div class="ca-icon"></div>
                            <h3>Philosophie</h3>
                            <h4>
                                <!--<span class="ca-quote">&ldquo;</span>-->
                                <span>Illustration d’une personne debout sur une pile de livres. Le cerveau de la personne est illustré. Nous voulons montrer que l’étude de la philosophie nécessite la lecture des théories anciennes et un travail réflexif.</span>
                            </h4>
                                <a href="#" class="ca-more">more...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">

<!--****************************Tab1 Starts********** -->

                            <section id="tab1" class="tab-content active">  
                                <h6>Définition</h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p> SOME TEXT SOME TEXT SOME TEXT</p></p>
                                </div></section>

<!--****************** Tab1 ENDs ******************** -->

<!--**********************Tab2 Starst********** -->

        <section id="tab2" class="tab-content hide">
            <h6>Similitudes avec la sociologie</h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p> SOME TEXT SOME TEXT SOME TEXT</p>
                                </div>

        </section>

 <!--********************** Tab2 ENDs ********** --> 

 <!--**********************Tab3 Starts********** -->     
        <section id="tab3" class="tab-content hide">
            <h6>Différences avec la sociologie</h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p> SOME TEXT SOME TEXT SOME TEXT</p>
                                </div>
        </section>
<!--********************** Tab3 ENDs ********** --> 

<!-- TAB nav starts -->

  <div>
    <ul class="nav nav-tabs1">
        <li class="active">
            <a href="#tab1">Définition</a>
        </li>
        <li>
            <a href="#tab2">Similitudes avec la sociologie</a>
        </li>
        <li>
            <a href="#tab3">Différences avec la sociologie</a>
        </li>
    </ul>
</div>
<!-- TAB nav ends -->
</div>
</div>
</div>
<!-- item 1 ENDs -->

所以有item1，item2，item3 ......并且每个都有相同的标签（不同的描述）。所以。当我只使用这个标签一次时（仅适用于Item1的DIV）它完美无缺，但当我想用于其他项目的“DIV”时，它就会破坏。

你可以帮助我制作一个循环，因为我是这个领域的新手，并希望得到专业人士的帮助。

提前致谢

在jquery选项卡中循环不同的页面

0 个答案: