1

リンクをクリックすると複数の div が表示されます。問題は、既に表示されている場合、新しい div が下に表示されることです。「古い」ものを新しいものに置き換えるにはどうすればよいですか?

jQuery("#div_to_show").hide();
jQuery(".toggle_link").show();

jQuery('.toggle_link').click(function(){
jQuery("#div_to_show").slideToggle();


jQuery("#div_to_show2").hide();
jQuery(".toggle_link2").show();

jQuery('.toggle_link2').click(function(){
jQuery("#div_to_show2").slideToggle();


jQuery("#div_to_show3").hide();
jQuery(".toggle_link3").show();

jQuery('.toggle_link3').click(function(){
jQuery("#div_to_show3").slideToggle();

複数の div を含むデモ: http://jsfiddle.net/ap2EQ/

4

5 に答える 5

2

slideToggle() を実行する前に、他の div を非表示にすることができます

jQuery('.iscriversi_toggle').click(function(){
    jQuery("#collaborare").hide();
    jQuery("#sostenerci").hide();
    jQuery("#iscriversi").slideToggle();
});
于 2013-10-25T20:59:00.010 に答える
1

これをすべて機能させるための私の提案は次のとおりです...

HTML

<a class="iscriversi_toggle aShow">...iscriversi</a>
<br>
<a class="collaborare_toggle aShow" >...collaborare</a>
<br>
<a class="sostenerci_toggle aShow">...sostenerci</a>

<div id="iscriversi" class="divtoggle">div1</div>
<div id="collaborare"  class="divtoggle">div2</div>
<div id="sostenerci"  class="divtoggle">div3</div>

<a>ここで、各要素にクラスを追加したことがわかります。クラスはaShowです。これにより、同じ呼び出しで一度にすべてのアンカーにアクセスできます。

また、各要素divtoggleにクラスを追加しました。div同じ理由。

jQuery

jQuery(document).ready(function(){
    // Hide all the divtoggle tags, and show the anchors
    jQuery ('.divtoggle').hide();
    jQuery(".aShow").show();

    jQuery('.iscriversi_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want
        jQuery ('.divtoggle').hide();
        jQuery("#iscriversi").slideToggle();
    });

    jQuery('.collaborare_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want        
        jQuery ('.divtoggle').hide();
        jQuery("#collaborare").slideToggle();
    });

    jQuery('.sostenerci_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want        
        jQuery ('.divtoggle').hide();
        jQuery("#sostenerci").slideToggle();
    });

});

コード内にコメントがあるので、簡単にフォローできます。これは、最初に持っていたものよりも少しクリーンで、よりスケーラブルです。また、ない側として、何度も指定する必要はありませんjQuery(document).ready(function(){。一度だけ使用してください。

最後に、jsFiddle のデモを次に示します: DEMO

于 2013-10-25T21:12:43.220 に答える
1

ユーザーがクリックしたものを表示するために使用できるコンテンツのない個別の div を使用します。

<!-- these divs stay hidden; they are just used to store the data you want to display later -->
<div id="iscriversi">div1</div>
<div id="collaborare">div2</div>
<div id="sostenerci">div3</div>

<!-- placeholder where content will be displayed when user clicks -->
<div id="target_container"></div>

次に、この関数を使用して、target_container のコンテンツを置き換えることができます。

function replaceDivContent(newDivID) {

   // Get the data from the DIV you want to display.
   newContentFromDiv = jQuery(newDivID).html();

   jQuery('#target_container')
     .hide() // hide so we can use the slide effect later
     .html(newContentFromDiv) // replace content of the placeholder div
     .slideToggle(); // show the placeholder div again using slide effect
}

JSFiddle の作業: http://jsfiddle.net/zpYBM/1/

于 2013-10-25T21:00:01.183 に答える
1

コードで改善できることが複数あります。まず、関数は必要ありません3 jQuery document ready。ウェブページの読み込み時にコードを初期化するために必要なのは 1 つだけです。classesコードを簡素化するために使用できます。ただし、主に行う必要があるのは、新しい div を切り替えるか表示する前に、すべての div を非表示にすることです。このコードが、その仕組みを見て理解するのに役立つことを願っています。

HTML 

<a class="toggle" data-target="iscriversi">...iscriversi</a><br>
<a class="toggle" data-target="collaborare">...collaborare</a><br>
<a class="toggle" data-target="sostenerci">...sostenerci</a>
<div id="iscriversi" class="div">div1</div>
<div id="collaborare" class="div">div2</div>
<div id="sostenerci" class="div">div3</div>

jQuery

jQuery(document).ready(function(){
  jQuery(".div").hide();
  jQuery('.toggle').click(function(){
    jQuery(".div").hide();
    jQuery("#"+$(this).data('target')).slideToggle();
  });
});

フィドル

http://jsfiddle.net/ap2EQ/2/

于 2013-10-25T21:00:58.133 に答える
0 
   $(document).ready(function(e){
   $("a").each(function(index,element){
   $(element).click(function(){
   var dis = $(element).next().css("display");
   if(dis == 'none')
    {
            $('div').hide(500);

        $(element).next().show(500);

    }else{
    $(element).next().hide(500)
    };

      })
    })

   })
于 2013-10-25T20:59:36.937 に答える