Question

我在页面上有3个div，我只想一次显示一个。

加载时，显示div 1（仅显示div1，div2和div3隐藏），有3个选项。无论用户选择什么选项，我都希望div 1隐藏，div 2显示。 Div 2只有一个选项，因此选择选项和div 3显示。

在stackoverflow上有一些类似于这个问题，但有3个选项可以在div 1中单击，我很难看似让它工作。（我需要每个都有不同的值来显示在div 3中div 1和2中选择的内容）

JSFidle - https://jsfiddle.net/7yuuz8d4/4/

HTML：

<!doctype html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>

 <div class="container">
    <div id="div1">
        <h2>Pick a style</h2>



    <div class="col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
    <a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual">Casual &raquo;</a>
    </div><!--Closes Col-md-4-->

    <div class="col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
    <a class="btn btn-primary btn-lg" href="#div2" role="button" value="street">Street &raquo;</a>
    </div><!--Closes Col-md-4-->

    <div class="col-md-4">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
    <a class="btn btn-primary btn-lg" href="#div2" role="button" value="classic">Classic &raquo;</a>
    </div><!--Closes Col-md-4-->
    </div><!--Closes div1-->

    <div id="div2">
    <h3>Measurements</h3>
      <select>
          <option value="tall">tall</option>
          <option value="average">average</option>
          <option value="short">short</option>
        </select> 
    <a class="btn btn-primary btn-lg" href="#div3" role="button">Next &raquo;</a>
    </div><!--Closes div2-->


    <div id="div3">
    <h3>Review</h3>
    <p>Display style and measurements selected:</p>
    <div id="display">

    </div>
    <a class="btn btn-primary btn-lg" href="success.html" role="button">Submit &raquo;</a>
    </div><!--Closes div3-->
    </div><!--Closes container-->

    </body>

Jquery -

function showDiv(selector){

    //---Select div to show
    var element = $("div#" + selector);

    //---Hide all div except the above div
    $("div[id^='div']").not(element).hide();

  //---Show the div
  element.show();

}

//---When the select changes
$(".btn btn-primary btn-lg").on("click", function(){

    showDiv( $(this).val() );

});

//---Show the first div by default
showDiv("#div1");

提前感谢您，因为您一直都很有帮助！

Answer 1

$(document).ready(function () {
            $('#div1').show();
            $('#div2').hide();
            $('#div3').hide();

            $('#div1').on('click', 'a', function (e) {
                $('#div1').hide();
                $('#div2').show();
            });

            $('#div2').on('click', 'a', function (e) {
                $('#div2').hide();
                $('#div3').show();
            });
        });

Answer 2

通过这个小提琴可能它可以帮助你 -

JSFiddle

JAVASCRIPT

$(document).ready(function(){
    $('#div2').hide();
    $('#div3').hide();
    $(".btn").on("click", function(){
        this1 = $(this).attr('href');
        console.log(this1);
        $('*[id^="div"]').hide();
        $(this1).show();
    });
});

试图显示和隐藏div以获得测序效果

2 个答案: