Question

首先，我不擅长这个，我找到了类似的问题和答案，但那些并没有最终导致我能够解决自己的问题。

我的问题如下：点击一个按钮会显示包含内容的div。最近我得到的只是使用html和css，点击按钮会导致隐藏自己的div并显示其他（基本上与我想要实现的完全相反）。在我完成了我的感觉之后＃39;回到html / css我开始使用javascript并重写内容。

导致：（html）

＆＃13;

$(document).ready(function () {

 $("#button").click(function (){
    var target = '#' + $(this).data('target');
    $("#hidden-div").slideUp()
    $(target).slideDown()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main" id="main">
    <section class="listview">
    <h1 class="title">List of functions used on the page</h1>
    <ul class ="list" id="list">
        <li>Splash page.
        <button class="btn-list" data-target="splash-div" id="splash-btn">Explanation</button><br>
        <div class="hidden-div" id="splash-div">blablabla</div><br>
        <a class="listlink" href="#splash">Take me there!</a></li>
        <li>Interactive list.
        <button class="btn-list" data-target="list-div" id="list-btn">Explanation</button><br>
        <div class="hidden-div" id="list-div">blablabla</div><br>
        <a class="listlink" href="#list">Take me there!</a></li>
    </ul>
    </section>
</div>

＆＃13;

编辑代码。

我尝试过.css（而不是show），先尝试隐藏true / false，然后在内容：none / block。

内容无/块是我如何使其工作＆＃39;不使用javascript。

我错过了一些明显的东西吗？或者我是否尝试使用错误的功能？

Answer 1

根据您的请求，我更新了 Q 结构，并应用了适合您情况的功能。 如果这不是您想要的，请发表评论我会对其进行重组并根据您的需要进行回答。希望这有帮助。

为您更新的代码

$(document).ready(function() {

  $("body").on('click', '.btn-list', function() {
    $(".hidden-div").hide();
    $(this).closest(".hideClass").find(".hidden-div").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main" id="main">
  <section class="listview">
    <h1 class="title">List of functions used on the page</h1>
    <ul class="list" id="list">
      <li class="hideClass">
        <p>Splash page1.</p>
        <button class="btn-list" data-target="#splash-div" id="splash-btn">Show me more</button><br>
        <div class="hidden-div" id="splash-div">blablabla</div>
        <a class="listlink" href="#splash">Take me there!</a>
      </li>
      <li class="hideClass">
        <p>Splash page2.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
      <li class="hideClass">
        <p>Splash page3.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
      <li class="hideClass">
        <p>Splash page4.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
      <li class="hideClass">
       <p>Splash page5.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
    </ul>
  </section>
</div>

Answer 2

检查一下，应该解决你的问题。

$(document).ready(function() {
  $("#splash-btn").click(function() {
    $("#splash-div").show();
  });
  
  $("#list-btn").click(function() {
    $("#list-div").show();
  });
});

.hidden-div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main" id="main">
  <section class="listview">
    <h1 class="title">List of functions used on the page</h1>
    <ul class="list" id="list">
      <li>Splash page.</li>
      <button class="btn-list" id="splash-btn">Show me more</button><br>
      <div class="hidden-div" id="splash-div">blablabla</div>
      <button class="btn-list" id="list-btn">Show me more</button><br>
      <div class="hidden-div" id="list-div">blablabla</div>
    </ul>
  </section>
</div>

Answer 3

$(document).ready(function() {
  $("button").on('click',function() {
    debugger;
    var selecteddiv = $(this).attr("id") + '-div';
    $("#"+selecteddiv).toggle();
  });
});

.hidden-div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main" id="main">
  <section class="listview">
    <h1 class="title">List of functions used on the page</h1>
    <ul class="list" id="list">
      <li>Splash page.</li>
      <button class="btn-list" id="splash">Show / Hide</button><br>
      <div class="hidden-div" id="splash-div">blablabla</div>
      <button class="btn-list" id="list">Show / Hide</button><br>
      <div class="hidden-div" id="list-div">sdfsdfsdfsdf</div>
    </ul>
  </section>
</div>

基本的javascript按钮功能（隐藏/显示内容）

3 个答案: