0

検索ページがあり、テレビ番組の検索ページと映画の検索ページを分離するタブコンポーネントのスクリプトを見つけました。ユーザーが「映画」タブをクリックしてそこから検索を実行すると、フォーム?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);
}

typeこのスクリプトを適応させて、URLパラメーターの変数に基づいて、ページが読み込まれたときに表示されるタブを決定するにはどうすればよいですか？

4

1 に答える 1

0

私は答えを見つけました。私の問題は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);
}
于 2012-12-12T18:24:59.443 に答える