シークエンス効果のdivを表示/非表示しようとしています

ページに3つのdivがありますので、一度に1つずつ表示したいだけです。シークエンス効果のdivを表示/非表示しようとしています

ロード時に、div1を表示します（div1、div2、およびdiv3が非表示になっていることを示します）.3つのオプションがあります。ユーザーが選択したオプションに関係なく、div 1を非表示にし、div 2を表示します。 Div 2には1つのオプションしかないので、オプションを選択してdiv 3を表示します。

この問題は、stackoverflowにいくつか類似していますが、div 1をクリックする3つのオプションがあり、問題なく動作するようです。

JSFidle（私はDIV 3 DIV 1および2に何を選択したものを表示するために異なる値を持つそれぞれが必要） - 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");

ありがとうございます、いつものように皆さんはすばらしい助けになります！

このフィドルによる

出典

2016-11-09 Kyle Schmelzer

あなたはDIV1とDIV3が負荷に表示され、選択DIV1後にそうなることを意味消えてdiv2を表示します。 div3は常にそこにとどまっていますか？ – tdog

いいえ、ロード時のみDiv1が表示されます。 selectでは、div 1が消え、div 2が表示されます。再び、選択されたdiv2が消えると、div3が表示されます。私はこれではっきりしていなかったことを謝罪します、私はそのように表示するために元の投稿を編集します。ありがとうございます –

$(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(); 
      }); 
     });

出典

2016-11-09 08:12:24 tdog

私の現在のJqueryは何ですか？ \t showDiv（$（this）.val（））; }）; "$（" .btn btn-primary btn-lg " 部分？ –

はい。私は負荷のために編集する。初めてdiv1だけ表示されます。 div2のリンクをクリックすると、div1が消え、div2が表示されます。 div2のリンクをクリックするとdiv2が表示され、div3が表示されます。もうshowDiv関数は必要ありません。 – tdog

それは完璧に機能しました。私はコードを複雑にすると思うが、私はあなたのものを入れて、すべてが驚くほどうまくいっている。あなたは大きな助けをしてくれてありがとう、私はあなたの答えをこれを解決するものとしてマークします。良い一日を！ –

行く、それはあなたを助けることができるかもしれ -

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(); 
    }); 
});

出典

2016-11-09 08:43:32

シークエンス効果のdivを表示/非表示しようとしています

答えて

関連する問題