JavaScript / HTML-根据url变量设置所选标签

Question

我有一个搜索页面，并且找到了一个选项卡组件的脚本，该脚本将TV-Show搜索页面和Movie搜索页面分开。 当用户单击时，说“电影”选项卡，然后从那里进行搜索，我将表单添加?type=movie&...到URL中。 但是，当他们执行搜索时，选定的选项卡是“电视节目”选项卡，并且必须单击以转到具有所需结果的另一个选项卡。

这是代码，其中是我尝试过的一些内容：

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>
<script src="tabs.js"></script>

这是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);
}

如何根据URL参数中的type变量，使该脚本适应我决定在加载页面时显示哪个选项卡？

Answer 1

我找到了答案。 我的问题是getUrlVars["type"] ，它无法给我' getUrlVars["type"]变量的值，所以我为此创建了自己的函数。 如果其他人想知道如何从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);
}