[英]jquery - active tab on page load
I would like to have my 'home' tab active while loading the page.我想在加载页面时激活我的“主页”选项卡。 I tried a lot of things but nothing seems to work.
我尝试了很多东西,但似乎没有任何效果。 Can anyone help me?
谁能帮我?
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>
To make "home" tab active initially, just add active
class to its <li>
element.要使“主页”选项卡最初处于活动状态,只需将
active
的 class 添加到其<li>
元素。 So, your navigation tab should look like this.因此,您的导航选项卡应如下所示。
<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>
Your Javascript
is working fine just some active
class & css
get problem in your code.您的
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>
is working fine only some css
are missing工作正常,只是缺少一些
css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.