如何使用按钮一次只显示一个 div

Question

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

请用 javascript 或 jquery

建议

Answer 1

尝试这样的事情

$( "#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>

Answer 2

Css

div { display:none }
.showme { display:block; }

Html

<div data-id="0" class="showme">1<div>
<div data-id="1">2<div>
<div data-id="2">3<div>

<span onclick="nav(0);">Prev</span>
<span onclick="nav(1);">Next</span>

jQuery函数：

function nav(x) {
    var y='';z='';c='';i=0;
    y=$('.showme').attr('data-id');

    if(x==0) {
       z=y-1;
       if(z<0) z=0;
    }

    if(x==1) {
       z=y+1;
       $('[data-id]').each(function(){i++;});
       if(z>=i) z=i;
    }

    $('[data-id]').removeClass('showme');
    $('[data-id="'+z+'"]').addClass('showme'); 
}

如何使用按钮一次只显示一个 div

How to keep only one div visible at time by using button

html

toggle