2010-10-12 4 views
0

код JQuery, как это:JQuery вкладки выбора

$(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 

и закладки:

<ul class="tabs"> 
    <li><a href="#tab1">Gallery</a></li> 
    <li><a href="#tab2">Submit</a></li> 
</ul> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content"> 
     <!--Content--> 
    </div> 
    <div id="tab2" class="tab_content"> 
     <!--Content--> 
    </div> 
</div> 

всякий раз, когда страница загружается закладка первой открыт 1-ый. но если я хочу показать вторую вкладку, то как я могу это сделать. например, изнутри функции im загружать страницу наподобие: window.location = "display.php"; при загрузке я хочу, чтобы вторая вкладка открывала, как это сделать ?? также из другой функции, если я хочу, чтобы первая вкладка показывала, как это сделать?

заранее спасибо ..

ответ

2

сделать это так,

$(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    var index = $("ul.tabs li.active").show().index(); 
    $(".tab_content").eq(index).show(); 

    //On Click Event 
    $("ul.tabs li").click(function() { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 

затем на вкладках (li) на HTML, установите активным, как,

<ul class="tabs"> 
    <li class="active"><a href="#tab1">Gallery</a></li> 
    <li><a href="#tab2">Submit</a></li> 
</ul> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content"> 
     <!--Content--> 
    </div> 
    <div id="tab2" class="tab_content"> 
     <!--Content--> 
    </div> 
</div> 
+0

я я сделал .. но теперь, когда страница перезагружается, tab2 открывается каждый раз .. – champ

+1

У меня есть опечатка по установке класса на 'li' выше. если вы хотите, чтобы 'tab2' устанавливал' class = "active" 'на tab2' li'. Не по javascript. например, в 'display.php','

  • Gallery
  • 'и на другой странице'
  • Submit
  • ' – Reigel

    +0

    та же проблема remailns .. tab1 отображается каждый раз , разве есть какой-либо способ, пока я покидаю страницу, активная вкладка останется активной после перезагрузки? – champ

    Смежные вопросы