原生js: 实现三个水平tab按钮, 默认第一个上面有class, 点击另外的实现class=‘cur‘的切换的效果

问:

<ul><li class="cur">热门问题</li><li>订阅问题</li><li>使用问题</li></ul>
这是我的代码,
这是我的代码:
// 遍历 helpInfoClass 数组helpInfoClass.forEach((item, index) => {var itemId = item[0];var itemName = item[1];// 跳过最后一个人工客服问题if (index === helpInfoClass.length - 1) {return;}// 创建 li 元素var liElement = document.createElement('li');// 将第一个常见问题改为热门问题if (index === 0) {liElement.textContent = "热门问题";liElement.classList.add('cur'); // 添加 cur class} else {liElement.textContent = itemName;}// 将 li 元素添加到 ul 元素中ulElement.appendChild(liElement);});
这是helpInfoClass:的数据格式:
[[1,"常见问题"],[2,"订阅问题"],[3,"使用问题"],[4,"人工客服"]
]
我希望: 点击订阅问题, class='cur'转移到订阅问题的li标签上,其他的li标签不再有class='cur',同时我希望获取到这个li标签的唯一标识,知道我点击的是哪一个li标签,如我点击订阅问题我希望我能有一个订阅问题li标签的唯一标识,点击使用问题有一个唯一标识

回答:

要实现你的需求，你可以在点击每个 `<li>` 标签时进行以下操作：1. 移除所有 `<li>` 标签上的 `cur` 类。
2. 将 `cur` 类添加到当前点击的 `<li>` 标签上。
3. 获取当前点击的 `<li>` 标签的唯一标识，即 `helpInfoClass` 数组中对应项的第一个元素。下面是你可以采取的实现方法，假设你有一个 `<ul>` 元素和一个 `helpInfoClass` 数组，HTML 结构如下：<ul id="ulElement"><li class="cur">热门问题</li><li>订阅问题</li><li>使用问题</li>
</ul>JavaScript 部分的代码可以这样写：// 假设已经有 helpInfoClass 数组和 ulElement 元素的引用// 获取 ul 元素
var ulElement = document.getElementById('ulElement');// 遍历每个 li 元素并为其添加点击事件监听器
ulElement.querySelectorAll('li').forEach((liElement, index) => {// 添加点击事件监听器liElement.addEventListener('click', () => {// 移除所有 li 元素上的 cur 类ulElement.querySelectorAll('li').forEach(item => {item.classList.remove('cur');});// 添加 cur 类到当前点击的 li 元素上liElement.classList.add('cur');// 获取当前点击的 li 元素对应的唯一标识var itemId = helpInfoClass[index][0];console.log("点击的唯一标识是:", itemId);});
});这段代码的关键点如下：
- 使用 `querySelectorAll('li')` 获取所有 `<li>` 元素，然后为每个 `<li>` 元素添加点击事件监听器。
- 在点击事件处理程序中，首先移除所有 `<li>` 元素上的 `cur` 类，然后为当前点击的 `<li>` 元素添加 `cur` 类。
- 通过 `helpInfoClass[index][0]` 获取当前点击的 `<li>` 元素对应的唯一标识，其中 `index` 是当前点击的 `<li>` 在 `helpInfoClass` 数组中的索引。这样就可以实现你的需求：点击不同的 `<li>` 标签时，该标签会获得 `cur` 类，而其他标签则会失去该类，并且可以获取到对应 `<li>` 标签的唯一标识。默认进入界面第一个元素上游class='cur':
document.addEventListener('DOMContentLoaded', function() {// 获取 ul 元素var ulElement = document.getElementById('ulElement');// 找到热门问题的 li 标签（假设是第一个）var hotIssueLi = ulElement.querySelector('li');// 给热门问题的 li 标签添加 cur 类hotIssueLi.classList.add('cur');
});

问:

ulElement.querySelectorAll('li').forEach((liElement, index) => {liElement.addEventListener('click', () => {// 移除所有 li 元素上的 cur 类ulElement.querySelectorAll('li').forEach(item => {item.classList.remove('cur');});// 添加 cur 类到当前点击的 li 元素上liElement.classList.add('cur');// 获取当前点击的 li 元素对应的唯一标识var itemId = helpInfoClass[index][0];// 根据 itemId 的值展示不同的问题类型if (itemId === 1) {// 展示热门问题console.log("展示热门问题");// 这里可以进行具体展示热门问题的操作} else if (itemId === 2) {// 展示所有订阅问题console.log("展示所有订阅问题");// 这里可以进行具体展示所有订阅问题的操作} else if (itemId === 3) {// 展示所有使用问题console.log("展示所有使用问题");// 这里可以进行具体展示所有使用问题的操作} else {// 展示未知问题console.log("展示所有未知问题");// 这里可以进行具体展示所有未知问题的操作}});
});这是我的逻辑代码, 是可以正常使用的非常好,
下面有一个helpInfoText数据:
[[1,"财新的哪些内容需要付费阅读1?",],[1,"财新的哪些内容需要付费阅读1?",],[2,"财新的哪些内容需要付费阅读2?",],[2,"财新的哪些内容需要付费阅读2?",],[3,"财新的哪些内容需要付费阅读3?",],[3,"财新的哪些内容需要付费阅读3?",]
],我希望你帮我遍历, 当我选中热门问题的时候遍历出热门问题的"财新的哪些内容需要付费阅读1?"文字,当我点击订阅问题的时候,帮我遍历出:"财新的哪些内容需要付费阅读2?"的文字,当我点击使用问题的时候,帮我遍历出使用问题的:"财新的哪些内容需要付费阅读3?"文字

回答:

为了根据选中的项展示对应的问题文字，你可以根据以下方法在点击事件处理函数中添加逻辑：ulElement.querySelectorAll('li').forEach((liElement, index) => {liElement.addEventListener('click', () => {// 移除所有 li 元素上的 cur 类ulElement.querySelectorAll('li').forEach(item => {item.classList.remove('cur');});// 添加 cur 类到当前点击的 li 元素上liElement.classList.add('cur');// 获取当前点击的 li 元素对应的唯一标识var itemId = helpInfoClass[index][0];// 根据 itemId 的值展示不同的问题类型if (itemId === 1) {// 展示热门问题console.log("展示热门问题");// 遍历并输出热门问题的文字内容helpInfoText.forEach(item => {if (item[0] === 1) {console.log(item[1]);}});} else if (itemId === 2) {// 展示所有订阅问题console.log("展示所有订阅问题");// 遍历并输出订阅问题的文字内容helpInfoText.forEach(item => {if (item[0] === 2) {console.log(item[1]);}});} else if (itemId === 3) {// 展示所有使用问题console.log("展示所有使用问题");// 遍历并输出使用问题的文字内容helpInfoText.forEach(item => {if (item[0] === 3) {console.log(item[1]);}});} else {// 展示未知问题console.log("展示所有未知问题");// 这里可以进行具体展示所有未知问题的操作}});
});在这段代码中，针对每个选项的点击事件，我添加了遍历 `helpInfoText` 数组的逻辑。根据 `itemId` 的值（1、2、3），分别输出对应类型的问题文字内容。例如，当点击热门问题时，会输出所有 `helpInfoText` 中 `itemId` 为 1 的问题文字；点击订阅问题时，会输出 `itemId` 为 2 的问题文字；点击使用问题时，会输出 `itemId` 为 3 的问题文字。