jquery - 页面加载时的活动选项卡
[英]jquery - active tab on page load
问题描述
我想在加载页面时激活我的“主页”选项卡。 我尝试了很多东西，但似乎没有任何效果。 谁能帮我？
const tabs = document.querySelectorAll('[data-tab-target]') const tabContents = document.querySelectorAll('[data-tab-content]') tabs.forEach(tab => { tab.addEventListener('click', () => { const target = document.querySelector(tab.dataset.tabTarget) tabContents.forEach(tabContent => { tabContent.classList.remove('active') }) tabs.forEach(tab => { tab.classList.remove('active') }) tab.classList.add('active') target.classList.add('active') }) })
<body> <div class="navigation"> <li data-tab-target="#home"><a href="#" class="tab-link">Home</a></li> <li data-tab-target="#about"><a href="#" class="tab-link">About</a></li> </div> <div id="tab-content"> <div id="home" class="fade-in" data-tab-content> <p class="text">This is home</p> </div> <div id="about" class="fade-in" data-tab-content> <p class="text">This is about</p> </div>
2 个解决方案
解决方案1
0 2021-02-26 06:55:19
要使“主页”选项卡最初处于活动状态，只需将active的 class 添加到其<li>元素。 因此，您的导航选项卡应如下所示。
<div class="navigation">
<li data-tab-target="#home" class="active"><a href="#" class="tab-link">Home</a></li>
<li data-tab-target="#about"><a href="#" class="tab-link">About</a></li>
</div>
解决方案2
0 2021-02-26 06:58:04
您的Javascript工作正常，只是一些active的 class 和css在您的代码中出现问题。
const tabs = document.querySelectorAll('[data-tab-target]') const tabContents = document.querySelectorAll('[data-tab-content]') tabs.forEach(tab => { tab.addEventListener('click', () => { const target = document.querySelector(tab.dataset.tabTarget) tabContents.forEach(tabContent => { tabContent.classList.remove('active') }) tabs.forEach(tab => { tab.classList.remove('active') }) tab.classList.add('active') target.classList.add('active') }) })
.navigation li.active a { color: #ffc107; } div#tab-content div { display: none; } div#tab-content div.active { display: block; }
<body> <div class="navigation"> <li data-tab-target="#home" class="active"><a href="#" class="tab-link">Home</a></li> <li data-tab-target="#about"><a href="#" class="tab-link">About</a></li> </div> <div id="tab-content"> <div id="home" class="fade-in active" data-tab-content> <p class="text">This is home</p> </div> <div id="about" class="fade-in" data-tab-content> <p class="text">This is about</p> </div>
工作正常，只是缺少一些css
在页面加载/重新加载时设置Jquery ui活动选项卡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.