Show/Hide Html 个按钮点击部分

Question

我在同一个页面中有 3 段代码，在这 3 段中我有提交按钮。最初第一部分应该是可见的，第二和第三部分是隐藏的。从第 1 部分单击按钮时，第 2 部分应该可见并隐藏第 1 和第 3 部分。在第二部分单击按钮时，第一和第二部分应该隐藏，第三部分应该可见。有人可以帮忙吗？

Answer 1

假设您在正文标签中关注了 three-section。

<body>
    <section class="allSection firstTimeLoad">
        <form action="">
          First name 1: <input type="text" name="FirstName" value="Mickey"><br>
          Last name 1: <input type="text" name="LastName" value="Mouse"><br>
        </form> 
        <button>Submit Button 1</button>
    </section>
    <section class="allSection">
        <form action="">
          First name 2: <input type="text" name="FirstName" value="Mickey"><br>
          Last name 2: <input type="text" name="LastName" value="Mouse"><br>
        </form> 
        <button>Submit Button 2</button>
    </section>

    <section class="allSection">
        <form action="">
          First name 3: <input type="text" name="FirstName" value="Mickey"><br>
          Last name 3: <input type="text" name="LastName" value="Mouse"><br>
        </form> 
        <button>Submit Button 3</button>
    </section>

</body>

要根据您的解释隐藏和显示部分，以下应该是您的JS代码。

<script>
$(document).ready(function(){
  onPageLoad();
   
  $("button").click(function(){
    $(".allSection").hide();
    var parent=$('section');
    var element = $(this).parent().is(':last-child');
    if($(this).parent().is(':last-child'))
        $('.firstTimeLoad').show();
    else
       $(this).parent().next().show();

  });  
  
});

function onPageLoad(){
    $(".allSection").hide();
    $(".firstTimeLoad").show();    
  }
</script>

Answer 2

试试这个代码

$(document).ready(function(){
    $('.section:not(:first-child)').hide();
   
    $(".section button").click(function(){
        $('.section').hide();

        if( $(this).closest('.section').is(':last-child') ){
            $(this).closest('.section').siblings().first().show();
        }else{
            $(this).closest('.section').next().show();
        }
    });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <section class="section">
        <div>
            <h2>Section 1</h2>
            <p>Ut ex consequat enim ullamco in do do proident ut sint adipisicing mollit do tempor.</p>
        </div>
        <button>Button 1</button>
    </section>
    <section class="section">
        <div>
            <h2>Section 2</h2>
            <p>Veniam occaecat aliquip do irure incididunt consectetur aliquip do sit aute non duis mollit sed consequat.</p>
        </div>
        <button>Button 2</button>
    </section>
    <section class="section">
        <div>
            <h2>Section 3</h2>
            <p>Sit anim ea eiusmod nulla ut laboris minim consectetur labore anim mollit id excepteur.</p>
        </div>
        <button>Button 3</button>
    </section>
</div>

Answer 3

首先创建一个 html 文件很容易。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .hide {
            display: none;
        }
    </style>
    <body>
        <section id="section-1">
            Section 1
            <button data-section-id="1">Next</button>
        </section>
        <section id="section-2" class="hide">
            Section 2
            <button data-section-id="2">Next</button>
        </section>
        <section id="section-3" class="hide">
            Section 3
            <button data-section-id="3">Next</button>
        </section>
        <script src="./js/script.js"></script>
    </body>
</html>

然后是包含您的代码的 script.js 文件。

(() => {
"use strict";

document.querySelectorAll("button").forEach((e) => {
    e.addEventListener("click", showNext);
});

function showNext(e) {
    let nextId, sectionId;
    sectionId = parseInt(e.target.getAttribute("data-section-id"));
    document.getElementById(`section-${sectionId}`).style.display = "none";

    // Next section id
    if (sectionId == 3) {
        nextId = 1;
    } else {
        // Get section id
        nextId = sectionId + 1;
    }
    document.getElementById(`section-${nextId}`).style.display = "block";
}
})();

Show/Hide Html 个按钮点击部分

Show/Hide Html sections on button click

html

javascript

c#

jquery

coffeescript