首頁猿問使用 javaScript...

使用 javaScript 隱藏和顯示內(nèi)容

JavaScript

慕尼黑8549860 2021-12-23 15:39:58

因此，在我的示例中，我有 2 個 div 按鈕（名為 btn1 和 btn2）和 2 個 div 元素（名為 content1 和 content2）。我想要的是，當您單擊 btn1 時，會顯示 content1。如果單擊 btn2，則應顯示 content2。Content1 和 content2 元素當前放置在同一位置，默認情況下，在您單擊任何內(nèi)容之前，不應打開任何內(nèi)容元素。我想用純 javaSript 來實現(xiàn)這一點。這是示例代碼：var btn1 = document.getElementById("btn1");var content1 = document.getElementById("content1");content1.style.opacity = "0";btn1.addEventListener("mouseover", showContent1);function showContent1(){ if(content1.style.opacity === "0") { content1.style.opacity = "1"; } else {content1.style.opacity = "0";}}var btn2 = document.getElementById("btn2");var content2 = document.getElementById("content2");content2.style.opacity = "0";btn2.addEventListener("mouseover", showContent2);function showContent2(){ if(content2.style.opacity === "0") { content2.style.opacity = "1"; } else {content2.style.opacity = "0";}}#btn1, #btn2 {width:100px;height:20px;text-align:center;background:grey;cursor:pointer;margin:10px 0px;}#contents {width: 200px;height:200px;border: 2px solid black;}#content1, #content2 {width: 200px;height:200px;position:absolute;background:lightblue;}<div id="btn1">show1</div><div id="btn2">show2</div><div id="contents"> <div id="content1">content 1</div> <div id="content2">content 2</div></div>

查看完整描述

3 回答

婷婷同學_

TA貢獻1844條經(jīng)驗獲得超8個贊

您可以向按鈕添加單擊事件，并根據(jù)單擊的按鈕顯示或隱藏相應的 div。

<!DOCTYPE html>

<html>

<head>

<style>

#btn1, #btn2 {

width:100px;height:20px;text-align:center;background:grey;cursor:pointer;margin:10px 0px;

}

#contents {

width: 200px;

height:200px;

border: 2px solid black;

}

#content1, #content2 {

width: 200px;

height:200px;

position:absolute;

background:lightblue;

display:none;

}

</style>

</head>

<body>

function showDiv(div){

if(div == 'btn1'){

document.getElementById('content1').style.display = 'block';

document.getElementById('content2').style.display = 'none';

}else{

document.getElementById('content1').style.display = 'none';

document.getElementById('content2').style.display = 'block';

}

</script>

<div id="content1">content 1</div>

<div id="content2">content 2</div>

</div>

</body>

Plunker 同樣：https ://plnkr.co/edit/brxoF2ClW2TeJOVMxn8d?p = preview

反對回復 2021-12-23

開心每一天1111

TA貢獻1836條經(jīng)驗獲得超13個贊

檢查這個，我已經(jīng)使它成為動態(tài)的，所以你可以創(chuàng)建無限的按鈕和內(nèi)容。

function toogleContent(id){

var toogleContent = document.getElementsByClassName('toogleContent');

var i = toogleContent.length;

while (i--) toogleContent[i].style.display = "none";

document.getElementById(id).style.display = "block";

}

#btn1, #btn2 {

width:100px;

height:20px;

text-align:center;

background:grey;

cursor:pointer;

margin:10px 0px;

}

#contents {

width: 200px;

height:200px;

border: 2px solid black;

}

#content1, #content2 {

width: 200px;

height:200px;

position:absolute;

background:lightblue;

display:none;

}

<div id="content1" class="toogleContent">content 1</div>

<div id="content2" class="toogleContent">content 2</div>

</div>

反對回復 2021-12-23

三國紛爭

TA貢獻1804條經(jīng)驗獲得超7個贊

雖然上述答案都是正確的，因為它們可以讓您從 A 到 B（基于您提供的代碼），但您也應該在代碼中使用一些“最佳實踐”更改，以避免常見的陷阱（和允許更好的可維護性和代碼重用）。

首先，您應該避免使用 ID 進行樣式設(shè)置。雖然使用 ID 來應用樣式是完全有效的（并且不會破壞任何東西），但不鼓勵這樣做。頁面的 ID 在文檔中必須始終是唯一的，因此使用它來設(shè)置多個可能相似元素的樣式意味著您將很快擁有損壞的 HTML（通過重用 ID）或笨拙且不可維護的樣式表（通過擁有多個相同的選擇器）。您應該更喜歡使用類為元素添加樣式，因為您可以重用類，甚至可以為每個元素擴展或使用多個類。

在我的代碼片段中，我還使用了一個帶有數(shù)字的數(shù)據(jù)集來幫助識別哪個元素被“選中”。數(shù)據(jù)集旨在存儲自定義數(shù)據(jù)，對于在 JavaScript 中存儲和檢索數(shù)據(jù)非常有用。通過使用數(shù)據(jù)集來存儲獨立于元素的 ID 或類的 ID，您可以無限地添加/刪除選項卡，而無需更改您的 CSS 或 JavaScript 以適應。畢竟，我可以添加 ID 為 3（例如<div class="button" data-id="3">）的數(shù)據(jù)集，并且button樣式不會受到影響。

其他好的做法包括與用于設(shè)置元素樣式的類名或選擇器相比，為 JavaScript 使用單獨的類名或選擇器（同樣，您可以在不影響元素外觀的情況下更改 JavaScript 選擇器的名稱 - 您也可以在 JavaScript 選擇器前面加上js-as我已經(jīng)完成了，所以更明顯的是，選擇器是由 JavaScript 使用的，而不是用于設(shè)置元素的樣式）。

我還使用了BEM樣式指南來命名我的類（盡管這是一個偏好 - 簡而言之，選擇并使用某種命名約定或樣式指南來命名/樣式元素是一種很好的做法）。

最終推薦（未顯示）<button>元素而不是<div>for 按鈕。這將改善您對網(wǎng)站的無障礙訪問，因為屏幕閱讀器技術(shù)可以區(qū)分什么是按鈕和什么僅僅是內(nèi)容塊（畢竟，屏幕閱讀器可能無法識別<div>添加了點擊事件處理程序，因此，殘疾用戶可能不知道他們可以單擊“按鈕”來切換選項卡）。

// Select all buttons using querySelectorAll

let buttons = document.querySelectorAll('.js-toggle');

// Loop through each button and add an event listener

Array.from(buttons).forEach(button => {

// Click event listener

button.addEventListener('click', function() {

// Select all elements to hide/show

let tab_contents = document.querySelectorAll('.js-content');

// Hide all elements

hideElems(tab_contents);

// Get ID of button

let id = this.dataset.id;

// Select relevant tab using the ID above

document.querySelector(`.js-content-${id}`).style.display = 'block';

});

// Function for hiding all elements

let hideElems = (elems) => {

Array.from(elems).forEach(elem => elem.style.display = 'none');

}

.button {

width: 100px;

height: 20px;

text-align: center;

background: grey;

cursor: pointer;

margin: 10px 0;

}

.tabs {

width: 200px;

height: 200px;

border: 2px solid black;

}

.tabs__content {

width: 200px;

height: 200px;

background: lightblue;

display: none;

}

<div class="tabs__content js-content js-content-1">content 1</div>

<div class="tabs__content js-content js-content-2">content 2</div>

</div>

反對回復 2021-12-23

3 回答
0 關(guān)注
279 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用 javaScript 隱藏和顯示內(nèi)容

使用 javaScript 隱藏和顯示內(nèi)容

3 回答

添加回答