时间戳

首页 > 解决方案 > 如何使用按钮一次只保持一个 div 可见

html - 如何使用按钮一次只保持一个 div 可见

问题描述

我有多个 div，我想一次只显示一个 div。

请使用 javascript 或 jquery 建议

标签： htmltoggle

解决方案

尝试这样的事情

$( "#button1" ).click(function() { $('.temp').hide(); $('#div1').show(); });
$( "#button2" ).click(function() { $('.temp').hide(); $('#div2').show(); });
$( "#button3" ).click(function() { $('.temp').hide(); $('#div3').show(); });
$( "#button4" ).click(function() { $('.temp').hide(); $('#div4').show(); });
$( "#button5" ).click(function() { $('.temp').hide(); $('#div5').show(); });
$( "#button6" ).click(function() { $('.temp').hide(); $('#div6').show(); });
$( "#button7" ).click(function() { $('.temp').hide(); $('#div7').show(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<button id="button1">Toggle 1</button>
<button id="button2">Toggle 2</button>
<button id="button3">Toggle 3</button>
<button id="button4">Toggle 4</button>
<button id="button5">Toggle 5</button>
<button id="button6">Toggle 6</button>
<button id="button7">Toggle 7</button>
<div id="main">
  <div id="div1" class="temp"> content 1</div>
  <div id="div2" class="temp"> content 2</div>
  <div id="div3" class="temp"> content 3</div>
  <div id="div4" class="temp"> content 4</div>
  <div id="div5" class="temp"> content 5</div>
  <div id="div6" class="temp"> content 6</div>
  <div id="div7" class="temp"> content 7</div>
</div>
 
</body>
</html>

推荐阅读