Javascript/HTML - 根據url變量設置選定的選項卡

Question

我有一個搜索頁面，並且我找到了一個用於分離電視節目搜索頁面和電影搜索頁面的標籤組件的腳本。當用戶點擊可以說「電影」選項卡，並從那裏執行搜索時，我會將表單添加?type=movie&...到網址。但是，當他們執行搜索時，選中的選項卡是「電視節目」選項卡，必須點擊才能到達具有他們想要的結果的其他選項卡。

下面是代碼，並在它的一些我的嘗試：

的HTML看起來像這樣：

<article class="first"> 
    <h2>Search</h2> 

    <hr/> 
    <div id="tabWrapper"> 
     <div id="tabContainer"> 
      <div class="tabs"> 
       <ul> 
        <li id="tabHeader_1">TV Shows</li> 
        <li id="tabHeader_2">Movies</li> 
       </ul> 
      </div> 
      <div class="tabContent"> 
       <div class="tabpage" id="tabpage_1"> 
        <?php 
         if (isset($sortFilt['year'])) 
          unset($sortFilt['year']); 
         if ($sortField=="year") 
          $sortField==" "; 
         DisplaySearchPage("shows", $terms, $sortField, $sortDir, $sortFilt, $page, $perPage); 
        ?> 
       </div> 
       <div class="tabpage" id="tabpage_2"> 
        <?php 
         DisplaySearchPage("movies", $terms, $sortField, $sortDir, $sortFilt, $page, $perPage); 
        ?> 
       </div> 
      </div> 
     </div> 
    </div> 
</article> 

而且這是在tabs.js腳本：

window.onload=function() { 

    // get tab container 
    var container = document.getElementById("tabContainer"); 
    // set current tab 
    var navitem = container.querySelector(".tabs ul li"); 
    //store which tab we are on 
    var ident = navitem.id.split("_")[1]; 
    navitem.parentNode.setAttribute("data-current",ident); 
    //set current tab with class of activetabheader 
    navitem.setAttribute("class","tabActiveHeader"); 

    //hide two tab contents we don't need 
    var pages = container.querySelectorAll(".tabpage"); 
    for (var i = 1; i < pages.length; i++) { 
     pages[i].style.display="none"; 
    } 

    //this adds click event to tabs 
    var tabs = container.querySelectorAll(".tabs ul li"); 
    for (var i = 0; i < tabs.length; i++) { 
     tabs[i].onclick=displayPage; 
    } 

    // This below is is what I tried. 
    var selTab = (getUrlVars()["type"] == "movies") ? 2 : 1; 
    var selTab = (getUrlVars()["type"] == "movies") ? 1 : 0; // Tried this too. 
    tabs[selTab].click(); 

    // its seems like it should have worked, what am I doing wrong. 
} 

// on click of one of tabs 
function displayPage() { 

    var current = this.parentNode.getAttribute("data-current"); 
    //remove class of activetabheader and hide old contents 
    document.getElementById("tabHeader_" + current).removeAttribute("class"); 
    document.getElementById("tabpage_" + current).style.display="none"; 

    var ident = this.id.split("_")[1]; 
    //add class of activetabheader to new active tab and show contents 
    this.setAttribute("class","tabActiveHeader"); 
    document.getElementById("tabpage_" + ident).style.display="block"; 
    this.parentNode.setAttribute("data-current",ident); 
} 

任何人都可以幫助我調整這個腳本，讓我決定當頁面被加載時顯示哪個標籤，基於type變量是否在URL參數中？提前致謝。

Answer 1

我找到了答案。我的問題是getUrlVars["type"]，它沒有給我'type'url變量的值，所以我爲它創建了自己的函數。如果其他人想知道如何從url中獲取變量，那麼這裏是工作代碼。

function getURLParameter(name) 
{ 
    return decodeURI(
     (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
    ); 
} 

window.onload = function() 
{ 
    // Get tab container 
    var container = document.getElementById("tabContainer"); 

    // Set the current tab. 
    var navitem = container.querySelector(".tabs ul li"); 

    // Store which tab is selected. 
    var ident = navitem.id.split("_")[1]; 
    navitem.parentNode.setAttribute("data-current", ident); 

    // Set the current tab with a class of 'activetabheader'. 
    navitem.setAttribute("class", "tabActiveHeader"); 

    // Hide the tab contents we don't need. 
    var pages = container.querySelectorAll(".tabpage"); 
    for (var i = 1; i < pages.length; i++) { 
     pages[i].style.display = "none"; 
    } 

    // This adds the click event handler to the tabs. 
    var tabs = container.querySelectorAll(".tabs ul li"); 
    for (var i = 0; i < tabs.length; i++) { 
     tabs[i].onclick = displayPage; 
    } 

    // Selects tab based on 'type' url variable. 
    if (getURLParameter("type") == "movies") { 
     tabs[1].click(); 
    } 
} 

// OnClick() event handler for tabs. 
function displayPage() 
{ 
    var current = this.parentNode.getAttribute("data-current"); 

    // Remove class of 'activetabheader' and hide the old contents. 
    document.getElementById("tabHeader_" + current).removeAttribute("class"); 
    document.getElementById("tabpage_" + current).style.display = "none"; 

    var ident = this.id.split("_")[1]; 

    // Add a class of 'activetabheader' to new active tab and show contents. 
    this.setAttribute("class", "tabActiveHeader"); 
    document.getElementById("tabpage_" + ident).style.display = "block"; 
    this.parentNode.setAttribute("data-current", ident); 
}