[英]How to click on a link on one page and change the location of a specific class on another page at the same time?
我在網站上設計了兩個頁面。我希望第二個選項卡 - btn,而不是第一個選項卡 - btn,具有 id = "default" 並在單擊第 1 頁上的鏈接並轉到第 2 頁時接受激活 class。 html代碼中可以看到,tab1中正常id=”default”,activate class。但是當點擊第1頁的鏈接出現第2頁時,不是tab1,而是第2個tab的id=”default " 和激活 class。同時,tab1 缺少 id = "default" 並且 class 被激活。 我可以用 JavaScript 管理嗎? 先謝謝各位朋友的配合
//codes of javascript for page: 2 function tabs(e,name){ var tab_btn = document.getElementsByClassName('tab--btn'); var tab_content = document.getElementsByClassName('tab--content'); var supporItemsCard = document.querySelector('.support--items__card'); var i; for( i = 0; i<tab_btn.length; i++){ tab_btn[i].classList.remove('active'); } for(i = 0; i<tab_content.length; i++){ tab_content[i].style.display = 'none'; } document.getElementById(name).style.display = 'block'; e.currentTarget.classList.add('active'); } document.getElementById('default').click();
page: 1 <a href=""> link page 1 </a> page: 2 <ul class="support--items__cards"> <li class="support--items__card tab--btn" id="default" onclick="tabs(event,'tab1')"> <h4 class="support--items__card__title">TAB 1</h4> </li> <li class="support--items__card tab--btn" onclick="tabs(event,'tab2')"> <h4 class="support--items__card__title">TAB 2</h4> </li> <li class="support--items__card tab--btn" onclick="tabs(event,'tab3')"> <h4 class="support--items__card__title">TAB 3</h4> </li> <ul> <div class="content"> <div id="tab1" class="tab--content"> content tab 1 </div> <div id="tab2" class="tab--content"> content tab 2 </div> <div id="tab3" class="tab--content"> content tab 3 </div> </div>
您可以檢查第 2 頁上的引薦頁面,並執行您現有的 function 標簽到 go 到第二個標簽。 那時從第一個選項卡中刪除 id 並將該屬性添加到第二個 li。 我從選項卡 function 中刪除了事件並僅使用了 tabid。
<ul class="support--items__cards">
<li class="support--items__card tab--btn" id="default" onclick="tabs('tab1')">
<h4 class="support--items__card__title">TAB 1</h4>
</li>
<li class="support--items__card tab--btn" onclick="tabs('tab2')">
<h4 class="support--items__card__title">TAB 2</h4>
</li>
<li class="support--items__card tab--btn" onclick="tabs('tab3')">
<h4 class="support--items__card__title">TAB 3</h4>
</li>
</ul>
<div class="content">
<div id="tab1" class="tab--content">
content tab 1
</div>
<div id="tab2" class="tab--content">
content tab 2
</div>
<div id="tab3" class="tab--content">
content tab 3
</div>
</div>
<script>
var referrer = document.referrer;
//alert(referrer);
if(referrer === "page1.html"){
tabs('tab2');
var supporItemsCard = document.getElementsByClassName('support--items__card');
supporItemsCard[0].removeAttribute("id");
supporItemsCard[1].setAttribute("id", "default");
}
//codes of javascript for page: 2
function tabs(name){
var tab_btn = document.getElementsByClassName('tab--btn');
var tab_content = document.getElementsByClassName('tab--content');
var supporItemsCard = document.querySelector('.support--items__card');
var i;
for( i = 0 ; i<tab_btn.length ; i++){
tab_btn[i].classList.remove('active');
}
for(i = 0 ; i<tab_content.length ; i++){
tab_content[i].style.display = 'none';
}
document.getElementById(name).style.display = 'block';
document.getElementById(name).classList.add('active');
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.