category.js:9未捕获TypeError:无法在HTMLAnchorElement.<anonymous> (category.js:9)读取null (读取“”classList“”)的属性

Question

我正在尝试创建一个e-shop，当div处于活动状态时，我希望显示不同的类别。

JAVASCRIPT：

const tab_switchers = document.querySelectorAll('[data-switcher]');

    for (let i = 0; i < tab_switchers.length; i++) {
        const tab_switcher = tab_switchers[i];
        const page_id = tab_switcher.dataset.tab;

        tab_switcher.addEventListener('click', () => {
            document.querySelector('.sidenav .tabs .tab.is-active').classList.remove('is-active');
            tab_switcher.parentNode.classList.add('is-active');

            SwitchPage(page_id);
        });
    }
}

function SwitchPage (page_id) {
    const current_page = document.querySelector('.pages .page.is-active');
    current_page.classList.remove('is-active')

    const next_page = document.querySelector(`.pages .page[data-page="${page_id}]`);
    next_page.classList.add('is-active');
}

HTML：`

<ul class="tabs"></ul>
    <li class="tab is-active">
        <a data-switcher data-tab="1">Dell</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="2">Apple</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="3">HP</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="4">Toshiba</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="5">Lenovo</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="6">Acer</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="7">Asus</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="8">Microsoft</a>
    </li>

我不知道还能做什么或寻找什么，我仍然使用javascript，但我遵循了一个确切的教程，并为他工作

Answer 1

您的示例代码中有许多错误：<ul class="tabs"></ul>是关闭的，不包括li，onst next_page = document.querySelector(.pages .pagedata-<ul class="tabs"></ul>=“${ page_id });page_id引用没有正确关闭。

以下是您的示例代码中的工作片段。

​

const tab_switchers = document.querySelectorAll('[data-switcher]');

  for (let i = 0; i < tab_switchers.length; i++) {
        const tab_switcher = tab_switchers[i];
        const page_id = tab_switcher.dataset.tab;
        
        tab_switcher.addEventListener('click', (event) => {
            document.querySelector('.tabs .tab.is-active').classList.remove('is-active');
            
            tab_switcher.parentNode.classList.add('is-active');

            SwitchPage(page_id);
        });
    }


function SwitchPage (page_id) {
    const current_page = document.querySelector('.pages .page.is-active');
   
    current_page.classList.remove('is-active')

    const next_page = document.querySelector(`.pages .page[data-page="${page_id}"]`);
     
    next_page.classList.add('is-active');
}

ul.tabs {
display:flex;
padding:0;
margin:0;
}

ul.tabs li {
list-style:none;
margin-right:10px;
cursor:pointer;
}



ul.tabs li.is-active {
text-decoration:underline;
}
.pages .page {
display:none;
}

.pages .page.is-active {
display:block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="tabs">
    <li class="tab is-active">
        <a data-switcher data-tab="1">Dell</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="2">Apple</a>
    </li>
    <li class="tab">
        <a data-switcher data-tab="3">HP</a>
    </li>
    
</ul>
<div class="pages">
  <div class="page is-active" data-page="1">Page Dell</div>
  <div class="page" data-page="2">Page Apple</div>
  <div class="page" data-page="3">Page HP</div>
</div>

​