猿问

使用 javaScript 隐藏和显示内容

因此，在我的示例中，我有 2 个 div 按钮（名为 btn1 和 btn2）和 2 个 div 元素（名为 content1 和 content2）。


我想要的是，当您单击 btn1 时，会显示 content1。如果单击 btn2，则应显示 content2。


Content1 和 content2 元素当前放置在同一位置，默认情况下，在您单击任何内容之前，不应打开任何内容元素。我想用纯 javaSript 来实现这一点。


这是示例代码：


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>


慕尼黑8549860
浏览 235回答 3
3回答

婷婷同学_

您可以向按钮添加单击事件，并根据单击的按钮显示或隐藏相应的 div。<!DOCTYPE html>&nbsp; &nbsp; <html>&nbsp; &nbsp; &nbsp; <head>&nbsp; &nbsp; <link rel="stylesheet" href="style.css">&nbsp; &nbsp; <script src="script.js"></script>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; #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;}&nbsp; &nbsp; </style>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; function showDiv(div){&nbsp; &nbsp; &nbsp; &nbsp; if(div == 'btn1'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content1').style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content2').style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content1').style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content2').style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>&nbsp; &nbsp; <div id="btn1" onclick="showDiv('btn1')">show1</div><div id="btn2" onclick="showDiv('btn2')">show2</div><div id="contents">&nbsp; <div id="content1">content 1</div>&nbsp; <div id="content2">content 2</div></div>&nbsp; </body>Plunker 同样：https ://plnkr.co/edit/brxoF2ClW2TeJOVMxn8d?p = preview
0

开心每一天1111

检查这个，我已经使它成为动态的，所以你可以创建无限的按钮和内容。function toogleContent(id){&nbsp; var toogleContent = document.getElementsByClassName('toogleContent');&nbsp; var i = toogleContent.length;&nbsp; while (i--) toogleContent[i].style.display = "none";&nbsp; document.getElementById(id).style.display = "block";}#btn1, #btn2 {&nbsp; width:100px;&nbsp; height:20px;&nbsp; text-align:center;&nbsp; background:grey;&nbsp; cursor:pointer;&nbsp; margin:10px 0px;}#contents {&nbsp; width: 200px;&nbsp; height:200px;&nbsp; border: 2px solid black;}#content1, #content2 {&nbsp; width: 200px;&nbsp; height:200px;&nbsp; position:absolute;&nbsp; background:lightblue;&nbsp; display:none;}<div id="btn1" class="toogleBtn" onclick="toogleContent('content1')">show1</div><div id="btn2" class="toogleBtn" onclick="toogleContent('content2')">show2</div><div id="contents">&nbsp; <div id="content1" class="toogleContent">content 1</div>&nbsp; <div id="content2" class="toogleContent">content 2</div></div>
0

三国纷争

虽然上述答案都是正确的，因为它们可以让您从 A 到 B（基于您提供的代码），但您也应该在代码中使用一些“最佳实践”更改，以避免常见的陷阱（和允许更好的可维护性和代码重用）。首先，您应该避免使用 ID 进行样式设置。虽然使用 ID 来应用样式是完全有效的（并且不会破坏任何东西），但不鼓励这样做。页面的 ID 在文档中必须始终是唯一的，因此使用它来设置多个可能相似元素的样式意味着您将很快拥有损坏的 HTML（通过重用 ID）或笨拙且不可维护的样式表（通过拥有多个相同的选择器）。您应该更喜欢使用类为元素添加样式，因为您可以重用类，甚至可以为每个元素扩展或使用多个类。在我的代码片段中，我还使用了一个带有数字的数据集来帮助识别哪个元素被“选中”。数据集旨在存储自定义数据，对于在 JavaScript 中存储和检索数据非常有用。通过使用数据集来存储独立于元素的 ID 或类的 ID，您可以无限地添加/删除选项卡，而无需更改您的 CSS 或 JavaScript 以适应。毕竟，我可以添加 ID 为 3（例如<div class="button" data-id="3">）的数据集，并且button样式不会受到影响。其他好的做法包括与用于设置元素样式的类名或选择器相比，为 JavaScript 使用单独的类名或选择器（同样，您可以在不影响元素外观的情况下更改 JavaScript 选择器的名称 - 您也可以在 JavaScript 选择器前面加上js-as我已经完成了，所以更明显的是，选择器是由 JavaScript 使用的，而不是用于设置元素的样式）。我还使用了BEM样式指南来命名我的类（尽管这是一个偏好 - 简而言之，选择并使用某种命名约定或样式指南来命名/样式元素是一种很好的做法）。最终推荐（未显示）<button>元素而不是<div>for 按钮。这将改善您对网站的无障碍访问，因为屏幕阅读器技术可以区分什么是按钮和什么仅仅是内容块（毕竟，屏幕阅读器可能无法识别<div>添加了点击事件处理程序，因此，残疾用户可能不知道他们可以单击“按钮”来切换选项卡）。// Select all buttons using querySelectorAlllet buttons = document.querySelectorAll('.js-toggle');// Loop through each button and add an event listenerArray.from(buttons).forEach(button => {&nbsp; // Click event listener&nbsp; button.addEventListener('click', function() {&nbsp; &nbsp; &nbsp;// Select all elements to hide/show&nbsp; &nbsp; &nbsp;let tab_contents = document.querySelectorAll('.js-content');&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;// Hide all elements&nbsp; &nbsp; &nbsp;hideElems(tab_contents);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;// Get ID of button&nbsp; &nbsp; &nbsp;let id = this.dataset.id;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;// Select relevant tab using the ID above&nbsp; &nbsp; &nbsp;document.querySelector(`.js-content-${id}`).style.display = 'block';&nbsp; });});// Function for hiding all elementslet hideElems = (elems) => {&nbsp; Array.from(elems).forEach(elem => elem.style.display = 'none');}.button {&nbsp; width: 100px;&nbsp; height: 20px;&nbsp; text-align: center;&nbsp; background: grey;&nbsp; cursor: pointer;&nbsp; margin: 10px 0;}.tabs {&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; border: 2px solid black;}.tabs__content {&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; background: lightblue;&nbsp; display: none;}<div class="button js-toggle" data-id="1">show1</div><div class="button js-toggle" data-id="2">show2</div><div class="tabs">&nbsp; <div class="tabs__content js-content js-content-1">content 1</div>&nbsp; <div class="tabs__content js-content js-content-2">content 2</div></div>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答