因此，在我的示例中，我有 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>
3 回答
婷婷同学_
TA贡献1844条经验 获得超8个赞
您可以向按钮添加单击事件，并根据单击的按钮显示或隐藏相应的 div。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<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>
<script>
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="btn1" onclick="showDiv('btn1')">show1</div>
<div id="btn2" onclick="showDiv('btn2')">show2</div>
<div id="contents">
<div id="content1">content 1</div>
<div id="content2">content 2</div>
</div>
</body>
Plunker 同样：https ://plnkr.co/edit/brxoF2ClW2TeJOVMxn8d?p = preview
开心每一天1111
TA贡献1836条经验 获得超13个赞
检查这个，我已经使它成为动态的，所以你可以创建无限的按钮和内容。
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="btn1" class="toogleBtn" onclick="toogleContent('content1')">show1</div>
<div id="btn2" class="toogleBtn" onclick="toogleContent('content2')">show2</div>
<div id="contents">
<div id="content1" class="toogleContent">content 1</div>
<div id="content2" class="toogleContent">content 2</div>
</div>
三国纷争
TA贡献1804条经验 获得超7个赞
虽然上述答案都是正确的，因为它们可以让您从 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 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="button js-toggle" data-id="1">show1</div>
<div class="button js-toggle" data-id="2">show2</div>
<div class="tabs">
<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>
添加回答
举报
0/150
提交
取消