同じdivにある2つのフォームの表示と非表示を切り替えるにはどうすればいいですか？

divに2つのフォームがあり、ページが読み込まれるときにform1が表示され、次のボタンをクリックするとform1が非表示になり、期待どおりに動作しているform2が表示されます。同じdivにある2つのフォームの表示と非表示を切り替えるにはどうすればいいですか？

ここで、逆のボタンをクリックすると、上記の逆のシナリオを達成したいと思います。フォーム2は非表示にし、フォーム1が表示されます。

はここ

function switchVisible() { 

    document.getElementById("disappear").innerHTML = ""; 

    if (document.getElementById('newpost')) { 

    if (document.getElementById('newpost').style.display == 'none') { 
     document.getElementById('newpost').style.display = 'block'; 
     document.getElementById('newpost2').style.display = 'none'; 
    } else { 
     document.getElementById('newpost').style.display = 'none'; 
     document.getElementById('newpost2').style.display = 'block'; 
    } 

    } 

}

だから基本的に私は同じdiv要素に存在する2つの形式はJavaScriptを使用して、その表示プロパティを設定するためのトグル機能を達成するための方法を探しています..私はこれまで持っているJavaScriptコードです。

出典

2017-05-22 Harry Rose

チェックhttps://www.w3schools.com/howto/howto_js_toggle_hide_show.asp –

あなたはjqueryのを使用したい場合はhttp://api.jquery.com/toggle/を確認してください。 – wostex

あなたのコードはうまくいくはずです、 'switchVisible（）'を使ってHTMLを共有してください – Satpal

2つのボタン要素

<button id="next"></button> 
<button id="back"></button>

を作るあなたはこのためにjQueryの（またはプレーンジャバスクリプト）を使用することができますが、私は個人的にjqueryのを好みます。

$("#next").click(function { 
    $("#newpost").hide(); 
    $("#newpost1").show(); 
}); 
$("#back").click(function { 
    $("#newpost").show(); 
    $("#newpost1").hide(); 
});

（ここにnewpost 'と「newpost1」の2つのフォーム要素のidのある）あなたはプレーンなJavaScriptを使用したい場合は、同様の形式を使用することができます。

は、変数stepCountを使用して、この

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</head>

出典

2017-05-22 11:04:02 Quasar

javascriptの形式は何ですか？ –

それを使わないので、私は本当に知りません。ごめんなさい。 – Quasar

私はそれを使用しません* – Quasar

を追加してから、数表示、適切な形式の値に応じました。

等はそれを1次に、次の増分のクリックで、0とstepCountを初期化し、バックボタンを1デクリメントstepCount押された状態を確認している場合stepCountそこから同様

1つのショー第二の形態である場合の状態をチェックstepCountは0ショー最初の形式であれば

は、あなたが非表示のdivを表示するにはトグル機能を使用することができ、適切なボタンクリックイベント

出典

2017-05-22 11:06:30

のクリックですべてこれを行います。

$('#newpost2').hide(); 
 
$("#Toggle").click(function() { 
 
    $(this).text(function(i, v) { 
 
    return v === 'More' ? 'Back' : 'More' 
 
    }); 
 
    $('#newpost, #newpost2').toggle(); 
 
});

.one { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #eee; 
 
    float: left; 
 
} 
 

 
.two { 
 
    height: 100px; 
 
    width: 150px; 
 
    background: #fdcb05; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='Toggle' class='pushme'>More</button> 
 
<div class="one" id='newpost'> 
 
    <p>Show your contain</p> 
 
</div> 
 
<div class="two" id='newpost2'> 
 
    <p>Hide your contain</p> 
 
</div>

出典

2017-05-22 11:23:15

次のボタンのフィドルは消える：


 
    
 
    $("#next").click(function() 
 
    { 
 
     $("#next").hide(); 
 
     $("#back").show(); 
 
    }); 
 
    $("#back").click(function() { 
 
     $("#back").show(); 
 
     $("#next").show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 

 

 
<input type="button" id="next" value="Next"/> 
 
<input type="button" id="back" value="Back"/>

<button class="btn btnSubmit" id="Button1" type="button" value="Click" onclick="switchVisible();">NEXT</button> 

<button type="button" class="btn btnSubmit" onclick="previousVisible();" >BACK</button>

は単にトンを使用します彼のjqueryの：

function switchVisible() 
    { 
     $("#newpost").hide(); 
     $("#newpost2").show(); 
    } 

    function previousVisible() 
    { 
    $("#newpost").show(); 
     $("#newpost2").hide(); 
    }

your updated fiddle

それとも、このように行うことができます：また、リンクボタンを使用し、この中には、特定のフォームのURLを提供し、リンクボタンを背面非表示にすることができます

<button class="btn btnSubmit" id="Button1" type="button" value="Click" onclick="form(1);">NEXT</button> 

    <button type="button" class="btn btnSubmit" onclick="form(2);" >BACK</button> 


function form(a) 
{ 
    if(a==1) 
    document.getElementById("newpost").style.display="none"; 
    else 
    document.getElementById("newpost2").style.display="block"; 
}

出典

2017-05-22 11:32:18 User6667769

あなたはnewpost2を意味しますか？ –

こんにちは！完璧に感謝しました..唯一のことは今、私は消えるために次のボタンが必要です、どうすればいいですか？ –

うわー、いいよね〜!! '$（"＃Button1 "）hide（）;' – User6667769

そのボタンをクリックすると、次のボタンだけが表示されます。

<a href="~/form1" style="btn-default" id="btnNext"> Next</a> 
<a href="~/form2" style="btn-default" id="btnPrevious"> Previous</a> 

$("#btnNext").click(function { 
    $("#btnNext").hide(); 
    $("#btnPrevious").show(); 
}); 
$("#btnPrevious").click(function { 
    $("#btnPrevious").show(); 
    $("#btnNext").hide(); 
});

出典

2017-05-22 11:36:04

同じdivにある2つのフォームの表示と非表示を切り替えるにはどうすればいいですか？

答えて

関連する問題