获取已单击链接的ID&更改其类别

Get ID of Clicked Link & Change Its Class

本文关键字：amp 单击 链接 ID 获取      更新时间：2023-09-26

我使用HTML、CSS和JavaScript构建了一个单独的页面"web应用程序"。有3个链接，当用户单击一个链接时，它会显示该链接的内容，并隐藏其他链接的内容。单击链接时，它应该变为粗体，但没有。我做了一些研究，发现我应该使用：

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

在我的函数中获取点击链接的ID，但它不起作用。为什么我不能在我的功能中获得点击链接的ID？我想把我的HTML、CSS和JavaScript分开。

Fiddle：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>

设置className的问题与函数的调用方式有关。

在单击的事件处理程序中，this上下文是锚点。但是，当您调用goToPage()时，this上下文是window。

您可以通过将呼叫从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中，为链接添加一个数据页属性：

<a href="#" id="linkPage1" class="selectedLink" data-page="page1">…</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]);

演示

您错过了一些东西：）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");
相关文章：