0

HTML、CSS、および JavaScript を使用して、単一ページの「Web アプリ」をまとめました。3 つのリンクがあります。ユーザーがリンクをクリックすると、そのリンクのコンテンツが表示され、他のリンクのコンテンツが非表示になります。リンクをクリックすると、太字に変わるはずですが、そうではありません。いくつかの調査を行ったところ、次を使用する必要があることがわかりました。

// Bold selected link
this.className = "selectedLink";

クリックされたリンクのIDを取得する関数内ですが、機能していません。関数内でクリックされたリンクの ID を取得できないのはなぜですか? HTML、CSS、JavaScript を分けておきたい。

フィドル: http://jsfiddle.net/ZYEUV/

<style>
.selectedLink {
    font-weight: bold;  
}
</style>

<p><a href="#" id="linkPage1" class="selectedLink">Example Page 1</a> | <a href="#" id="linkPage2">Example Page 2</a> | <a href="#" id="linkPage3">Example Page 3</a></p>

<div id="page1">
<h1>Example Page 1</h1>
<p>Content goes here.</p>
</div>

<div id="page2">
<h1>Example Page 2</h1>
<p>Content goes here.</p>
</div>

<div id="page3">
<h1>Example Page 3</h1>
<p>Content goes here.</p>
</div>

<script>
var pages = [page1, page2, page3];

 // Displays page and hides all other pages
function goToPage(pageID) {
    console.log(pageID);
    // Display page
    for (var i = 0; i < pages.length; i++) {
        if (pageID == pages[i].id) {
            // Show page
            pages[i].style.display = "block";

            // Bold selected link
            this.className = "selectedLink";
        } else {
            console.log(pages[i]);
            // Hide page
            pages[i].style.display = "none";

            // Unbold unselected link
            this.className = "selectedLink";
        }
    }
}

linkPage1.onclick = function () {
    goToPage("page1");
};

linkPage2.onclick = function () {
    goToPage("page2");
};

linkPage3.onclick = function () {
    goToPage("page3");
};

goToPage("page1");
</script>
4

2 に答える 2

1

あなたは何かを逃します:) http://jsfiddle.net/ZYEUV/3/

JS:

var pages = [page1, page2, page3];
var links = [linkPage1, linkPage2, linkPage3];

 // Displays page and hides all other pages
function goToPage(pageID) {
    console.log(pageID);
    // Display page
    for (var i = 0; i < pages.length; i++) {
        if (pageID == pages[i].id) {
            // Show page
            pages[i].style.display = "block";


            // Bold selcted link
            links[i].className = "selectedLink";

        } else {
            console.log(pages[i]);
            // Hide page
            pages[i].style.display = "none";

            // Unbold unselected link
            links[i].className = "";
        }
    }
}

linkPage1.onclick = function () {
    goToPage("page1");
};

linkPage2.onclick = function () {
    goToPage("page2");
};

linkPage3.onclick = function () {
    goToPage("page3");
};

goToPage("page1");
于 2013-09-04T07:22:27.103 に答える
1

className を設定していた問題は、関数の呼び出し方法に関連しています。

クリックのイベント ハンドラーでは、thisコンテキストがアンカーです。ただし、コンテキストを呼び出すとgoToPage()、.thiswindow

goToPageへの呼び出しをに変更することでそれを修正できます

goToPage.call(this, "page1");

ただし、その後this、最近クリックされたアンカーを参照するという次の問題に遭遇します。そのため、現在のロジックではselectedLinkクラスを削除する方法がありませんでした。

簡単な解決策は、ページ配列を使用して既に確立したパターンに一致するように、コードを少しリファクタリングすることです。

例

脚本：

var pages = [page1, page2, page3];
var links = [linkPage1, linkPage2, linkPage3];

// Displays page and hides all other pages
function goToPage(pageID, evt) {
    console.log(pageID);
    // Display page
    for (var i = 0; i < pages.length; i++) {
        if (pageID == pages[i].id) {
            // Show page
            pages[i].style.display = "block";

            // Bold selcted link
            links[i].className = "selectedLink";
        } else {
            console.log(pages[i]);
            // Hide page
            pages[i].style.display = "none";

            // Unbold unselected link
            links[i].className = "";
        }
    }
}

別のアプローチ

マークアップを少し変更することで、コードの繰り返しを減らし、新しいページの追加を簡素化できます。

HTML で、data-page 属性をリンクに追加します。

<a href="#" id="linkPage1" class="selectedLink" data-page="page1">…&lt;/a>

その変更により、スクリプトを次のようにリファクタリングできます。

// List of links with a data-page attribute
var links = document.querySelectorAll("a[data-page]");
var pages = {};

function clickHandler() {
    var page = this.dataset.page;

    for(var i = 0; i < links.length; ++i) {
        links[i].className = "";
        pages[links[i].dataset.page].style.display = "none";
    }

    this.className = "selectedLink";
    pages[page].style.display = "block";
}

// Setup handlers in a loop (maybe use addEventListener here instead)
// Store map of pages by id
for(var i = 0; i < links.length; ++i) {
    links[i].onclick = clickHandler;
    pages[links[i].dataset.page] = document.getElementById(links[i].dataset.page);
}

// Call the click handler with the context of the link to initialize
links[0].onclick.call(links[0]);

デモ

于 2013-09-04T07:45:56.170 に答える