简体   繁体   中英

How can i apply jquery function on a variable?

I want to apply slimScroll function on 2 different divs. only one div is active at one time. So, i am using a variable to get current tab name. When user clicks Reviews, slimscroll shall apply on #reviews and if gallery is clicked, it should switch to gallery.

html code:

<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#reviews" data-toggle="tab">Reviews</a></li>
   <li><a href="#gallery" data-toggle="tab">Gallery</a></li>
</ul><!-- tabs -->
<div class="tab-content">
    <div class="tab-pane active" id="reviews">
        reviews
    </div>
    <div class="tab-pane" id="gallery">
        gallery
    </div>
</div>

jquery code:

$(document).ready(function(){
    $('.nav-pills li a').on('click',function(){
        var current = ($(this).text());
        alert(current);
    });
    $('article').slimScroll({
        position: 'right',
        height: '370px',
        railVisible: true,
        alwaysVisible: true
    });
});

Do like this:

$(document).ready(function(){
    $('.nav-pills li a').on('click',function(){
        var current = $(this).attr("href").split('#')[1];
        $(this).closest('ul').find('li').removeClass('active');
        $(this).parent().addClass('active');
        //$('div.tab-pane').removeClass('active');
        //$('div#'+current).addClass('active');
        alert(current);

        $('#'+current).slimScroll({
        position: 'right',
        height: '370px',
        railVisible: true,
        alwaysVisible: true
    });

or:

$(document).ready(function(){
        $('.nav-pills li a').on('click',function(){
            var current = $(this).attr("href").split('#')[1];
            $(this).closest('ul').find('div.tab-content').find('div.tab-pane').removeClass('active');
            $('div#'+current).addClass('active');
            alert(current);

            $('#'+current).slimScroll({
            position: 'right',
            height: '370px',
            railVisible: true,
            alwaysVisible: true
        });
$('.nav-pills li a').on('click', function(e){
    e.preventDefault();

    $(this).parents('li').siblings().each(function() {
        $(this).removeClass('active');
        $($(this).find('a').attr('href')).unbind('slimscroll');
    });

    $($(this).attr('href')).slimScroll({
        position: 'right',
        height: '370px',
        railVisible: true,
        alwaysVisible: true
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM