Javascript 获取已单击链接的ID&；换班

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

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

在我的函数中获取被点击链接的ID，但它不起作用。为什么我不能在我的函数中获取已单击链接的ID？我希望将HTML、CSS和JavaScript分开

小提琴：

.selectedLink{
字体大小：粗体；
}
||

示例第1页
内容在这里

示例第2页
内容在这里

示例第3页
内容在这里

变量页=[page1，page2，page3]；
//显示页面并隐藏所有其他页面
函数goToPage（pageID）{
console.log（pageID）；
//显示页
对于（变量i=0；i

你错过了什么：）

JS:

var-pages=[page1，page2，page3]；
变量链接=[linkPage1，linkPage2，linkPage3]；
//显示页面并隐藏所有其他页面
函数goToPage（pageID）{
console.log（pageID）；
//显示页
对于（变量i=0；i

设置类名时遇到的问题与调用函数的方式有关

在单击的事件处理程序中，

this

上下文是锚定。但是，当您调用

goToPage（）

时，

此

上下文是

窗口

您可以通过将调用更改为

goToPage

goToPage.call(this, "page1");

但是，您随后会遇到下一个问题，即

此

现在指的是最近单击的锚。因此，按照您当前的逻辑，无法删除

selectedLink

类

快速的解决方案是稍微重构代码，以匹配使用pages数组已经建立的模式

脚本：

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 = "";
        }
    }
}

var-pages=[page1，page2，page3]；
变量链接=[linkPage1，linkPage2，linkPage3]；
//显示页面并隐藏所有其他页面
函数goToPage（页面ID，evt）{
console.log（pageID）；
//显示页
对于（变量i=0；i

替代方法

通过稍微更改标记，可以减少代码中的一些重复，并简化添加新页面的过程

在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]);

//具有数据页属性的链接列表
var links=document.queryselectoral（“数据页”）；
var pages={}；
函数clickHandler（）{
var page=this.dataset.page；
对于（变量i=0；i

<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]);