我想隱藏頁面上可用的與 li 相關的內容并默認顯示一個。其余內容應在選中時顯示。所以我想顯示用戶從 li 中選擇的內容。我想要一個javascript語法。所以請幫助我擺脫這種情況。
當串列項被選中時，它們的內容是簡短的。那是因為它是一個例子
const toggleButtons = document.querySelectorAll('.toggleButton');
toggleButtons.forEach( toggleButton => {
toggleButton.addEventListener( 'click', () => {
removeactiveClasses()
toggleButton.classList.add('active')
})
})
function removeactiveClasses() {
toggleButtons.forEach( toggleButton => {
toggleButton.classList.remove('active')
})
}.Selectproperties {
width: 100%;
text-align: center;
}
.Selectproperties h2 {
font-size: 20px;
font-family: rubik;
font-weight: 600;
color: black;
letter-spacing: 1px;
/*background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;*/
}
.ListProperties {
width: 80%;
display: flex;
flex-wrap: nowrap;
background-color: whitesmoke;
margin: auto;
padding: 2px;
border-radius: 1.5em;
font-size: 20px;
margin-bottom: 10px;
}
.toggleButton {
width: 20%;
font-size: 14px;
font-family: rubik;
flex: 1;
flex-basis: 150px;
border-radius: 1.5em;
padding: 8px 1px;
text-align: center;
list-style: none;
cursor: auto;
transition: all 0.3s ease;
cursor: pointer;
}
.toggleButton.active {
background-color: #ff3333;
box-shadow: 1px 1px 1px grey;
color: white;
border: 0.5px solid red;
}<div class="Selectproperties" id="Selectproperties">
<h2>Properties</h2>
<ul class="ListProperties" id="ListProperties">
<li class="toggleButton active" id="Direction">Flex Direction</li>
<li class="toggleButton">Justify Content</li>
<li class="toggleButton">Align Items</li>
<li class="toggleButton">Flex Wrap</li>
</ul>
</div>
<div class="Flex-direction">This is Flex-direction </div>
<div class="Justify Content">This is Justify Content</div>
<div class="Align Items">This is Align Items </div>
<div class="Flex Wrap">This is Flex Wrap </div>uj5u.com熱心網友回復：
你需要做的是兩件事
首先向內容添加顯示/隱藏類
其次添加切換按鈕和內容之間的關系
讓我們在這里分解一下
我們將向 css 添加兩個類來顯示或隱藏內容
.content {
display: none;
}
.active-content {
display: block;
}
現在讓我們將內容類添加到所有 div 中，第一個設定為活動
<div class="Flex-direction content active-content">This is
Flex-direction </div>
<div class="Justify-content content">This is Justify
Content</div>
<div class="Align Items content">This is Align Items </div>
<div class="Flex Wrap content">This is Flex Wrap </div>
然后我們需要切換按鈕和內容之間的連接，在這里我們可以使用 data-id 和 id 屬性
data 屬性允許您在 html 元素上存盤額外資訊，您可以在此處找到有關它的更多資訊
在我們的例子中，我們需要將內容的 id 存盤在其相應的切換按鈕中，例如，如果我們給第一個內容的 id 為“direction”，那么我們需要將此 id 存盤在第一個切換按鈕的某處，如下所示：
<li class="toggleButton active" data-id="direction">Flex Direction</li>
....
<div class="Flex-direction content active-content" id="direction">This is Flex-direction </div>
現在在javascript中，當我們回圈我們需要的切換按鈕時
- 將當前單擊按鈕的 id 存盤在變數中
- 獲取此 id 的內容（使用 getElementById）
- 為我們在上一步中獲得的內容添加一個活動內容類
- 從其他元素中洗掉所有活動內容類
這是一個作業示例
const toggleButtons = document.querySelectorAll(".toggleButton");
const content = document.querySelectorAll(".content");
toggleButtons.forEach((toggleButton) => {
toggleButton.addEventListener("click", (e) => {
// here we get the id of the clicked button
const id = e.target.dataset.id;
// what we need to do is showing the content of this id
// and hiding the content that has an id !== of the targetted one
content.forEach((text) => {
text.classList.remove("active-content");
});
const targettedText = document.getElementById(id);
targettedText.classList.add("active-content");
removeactiveClasses();
toggleButton.classList.add("active");
});
});
function removeactiveClasses() {
toggleButtons.forEach((toggleButton) => {
toggleButton.classList.remove("active");
});
}.Selectproperties {
width: 100%;
text-align: center;
}
.Selectproperties h2 {
font-size: 20px;
font-family: rubik;
font-weight: 600;
color: black;
letter-spacing: 1px;
/*background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;*/
}
.ListProperties {
width: 80%;
display: flex;
flex-wrap: nowrap;
background-color: whitesmoke;
margin: auto;
padding: 2px;
border-radius: 1.5em;
font-size: 20px;
margin-bottom: 10px;
}
.toggleButton {
width: 20%;
font-size: 14px;
font-family: rubik;
flex: 1;
flex-basis: 150px;
border-radius: 1.5em;
padding: 8px 1px;
text-align: center;
list-style: none;
cursor: auto;
transition: all 0.3s ease;
cursor: pointer;
}
.toggleButton.active {
background-color: #ff3333;
box-shadow: 1px 1px 1px grey;
color: white;
border: 0.5px solid red;
}
.content {
display: none;
}
.active-content {
display: block;
}<div class="Selectproperties" id="Selectproperties">
<h2>Properties</h2>
<ul class="ListProperties" id="ListProperties">
<li class="toggleButton active" data-id="direction">Flex Direction</li>
<li class="toggleButton" data-id="justify-content">Justify Content</li>
<li class="toggleButton" data-id="align-items">Align Items</li>
<li class="toggleButton" data-id="flex-wrap">Flex Wrap</li>
</ul>
</div>
<div class="Flex-direction content active-content" id="direction">This is Flex-direction </div>
<div class="Justify-content content" id="justify-content">This is Justify Content</div>
<div class="Align Items content" id="align-items">This is Align Items </div>
<div class="Flex Wrap content" id="flex-wrap">This is Flex Wrap </div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/419172.html
標籤：