單擊更改站點範圍內的css點擊

-2

我想要做的是根據所選的選項顯示兩個不同的菜單。在我的片斷，你可以看到我有option a和option b單擊更改站點範圍內的css點擊

.option-a, .option-b { 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
} 
 

 
.option-a:hover, .option-b:hover { 
 
    text-decoration: underline; 
 
} 
 

 
.option-a-content { 
 
    display: block; 
 
} 
 
.option-b-content { 
 
    display: none; 
 
}

<div class="option-a"> 
 
Option A 
 
</div> 
 
<div class="option-b"> 
 
Option B 
 
</div> 
 
<br> 
 
<br> 
 
<div class="option-a-content"> 
 
This is the contents of A 
 
</div>

option-a-content設置爲display: block和option-b-content設置爲display: none;

我想使它所以當你點擊「選項B'它將option-a-content的css更改爲display: none，並將其更改爲display: block

編輯：爲了澄清，我的問題是，我可以讓CSS改變點擊，但是當我離開頁面時，它會恢復到默認狀態。

來源

2017-09-24 tbar

純代碼編寫請求是題外話堆棧溢出 - 我們期望在這裏問題涉及到*具體*編程問題 - 但我們將愉快地幫助你自己寫！告訴我們 [你試過的東西]（https://stackoverflow.com/help/how-to-ask），以及你卡在哪裏。這也將幫助我們更好地回答你的問題。 – glennsl

對不起，我的問題特別是當使用jQuery css函數時，我無法在頁面之間導航時保持這種狀態，所以我可以使用它來啓用/禁用div，但是當我離開頁面我做了它，它重置爲默認 – tbar

您需要記住狀態，客戶端與本地存儲或服務器端與會話變量（例如）。根據您選擇的解決方案，您的應用必須找出內容應該處於的狀態，然後相應地更新它。由於您在頁面上使用JavaScript，我建議您將用戶的選擇存儲在localstorage中，並在documentReady上檢索它。請參閱：https：//developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API – Moob

這裏是存儲在localStorage的狀態的一個簡單的例子：

$(function(){ 
    $(".option-toggle").on("click", function(){ 
     //get the href of the clicked item. This is the id of the element we wish to show 
     var selectedOptionID=$(this).attr("href"); 
     //hide all option-content elements 
     $(".option-content").attr("aria-hidden",true); 
     //show the one we want 
     $(selectedOptionID).attr("aria-hidden",false); 
     //remember the active one in localstorage 
     localStorage.setItem("selectedOptionID", selectedOptionID); 
    }); 

    //onload, read from local storage and trigger a click on the appropriate option: 
    var selectedOptionIdFromStorage = localStorage.getItem("selectedOptionID"); 
    if(selectedOptionIdFromStorage){ 
     //trigger a click on the select-option having a href equal to selectedOptionIdFromStorage: 
     $(".option-toggle[href='"+selectedOptionIdFromStorage+"']").trigger("click"); 
    } 
});

https://jsfiddle.net/jvsnphmn/3/

來源

2017-09-24 14:33:38 Moob

我會把它放在一個片段中，但由於本地存儲限制，它不會工作。 – Moob

單擊更改站點範圍內的css點擊

回答

相關問題