2

我需要切换标签的帮助，这里是示例链接：http ://app.seed-ville.com/357-2/#1

这只是头部，我不确定它有什么问题。

  <ul class="nav">
            <li><a class="active" href="javascript:void(0);">Terms</a></li>
            <li><a href="#1" data-toggle="tab">Privacy</a></li>
            <li><a href="#2" data-toggle="tab">FAQ</a></li>
            <li><a href="#3" data-toggle="tab">Contact</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">About Us</a></li>
        </ul>


    ----------


    <section id="tab_panes">
    <div class="tab_pane active">Hello</div>
    <div class="tab_pane active"></div>
    <!-- we'll copy/paste the other panes -->
    <div class="tab_pane"><img class="alignleft" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" alt="" /></div>
    <div class="tab_pane">Hi1</div>
    <div class="tab_pane">Hi2</div>
    <div class="tab_pane">Hi3</div>
    </section>


    ----------

这很可能是问题所在。我不确定我是否在页面上正确调用和执行它。 

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[

$(function() {

    $('.nav a').on('click', function() {

        var $el = $(this);
        var index = $('.nav a').index(this);
        var active = $('.nav').find('a.active');

        /* if a tab other than the current active
        tab is clicked */

        if ($('nav a').index(active) !== index) {

            // Remove/add active class on tabs
            active.removeClass('active');
            $el.addClass('active');

            // Remove/add active class on panes
            $('.tab_pane.active')
                .hide()
                .removeClass('active');
            $('.tab_pane:eq('+index+')')
                .fadeIn()
                .addClass('active');

        }
    });

}());
</script>

调用 .redactor 函数时可能出现错误

/* Ready function */
sprout.ready = function($) {
// WYSIWYG
$('.redactor, #gb_deal_description, #gb_deal_highlights, #gb_deal_fine_print, #gb_contact_merchant_description').redactor();
jQuery('.masonry_loop').masonry({
itemSelector: '.loop_deal',
gutterWidth: 15,
isAnimated: true,
isResizable: true,
});
4

1 回答 1

0

您可以找到父li元素的索引，请注意您的代码中存在语法错误。如果您想避免页面中的冲突，您应该将 jQuery 作为参数传递给自调用函数。

(function($){

    $('.nav a').on('click', function(event) {
        event.preventDefault();

        $('.active').removeClass('active')
        var ind = $(this).addClass('active').parent().index()

        $('.tab_pane.active').hide().removeClass('active');
        $('.tab_pane:eq('+ind+')').addClass('active').fadeIn();
    });

})(jQuery)

http://jsfiddle.net/dLQV8/

于 2012-11-01T03:25:38.473 回答