Question

I need help with switching tabs, here is the example link: http://app.seed-ville.com/357-2/#1

This is just the head part I’m not sure there’s anything wrong with it.

  <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>


    ----------

This is most likely where the problem is. I’m not sure if I’m calling and executing it correctly on the page.

<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>

Possible error in .redactor function being called

/* 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,
});

Answer 1

You can find the index of parent li elements, note that there is a syntax error in your code. If you want to avoid conflict in your page you should pass jQuery as a parameter to a self-invoking function.

(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/