2つのdivの間で非表示/表示を切り替えるjQuery

2つのdiv間で非表示/表示を切り替えるリンクを作成しようとしています。奇妙なことは何もなく、私はこれが行われた多くの例を見てきました。私の基本的なHTMLの構造は次のとおりです。2つのdivの間で非表示/表示を切り替えるjQuery

<div id="wrapper"> 
    <div id="tog_A"> 
    <div id="tog_B"> 
</div> 

<a href="#" id="link">Toggle</a>

とCSS：私は、私が発見したさまざまなソリューションを追加するとき

#tog_A { 
    display:block; 
} 
#tog_A { 
    display:block; 
}

しかし、他のいくつかのJavaScriptコードとの競合があるようですが、私のサイトの使用。私はJavaScriptに関しては本当にn00bなので、誰かが私を正しい方向に向けることができ、おそらく私の既存のコードを新しいものと組み合わせるのに役立つかもしれません。競合していると思わJavaScrip既存

：

//Load when dom ready 
jQuery(function() { 
// click listener for anchors 
jQuery(document).on("click",'a[href^="#"]', function(e) { 

// prevent click and side effects 
    e.preventDefault(); 

// do the scroll 
    jQuery('body, html').animate({ 
    scrollTop : jQuery(this.hash).offset().top 
    }); 

//change state of button 
var oldHash = jQuery(this.hash).attr("id").split("-"); 
var oldNr = parseInt(oldHash[1],10); 
var nrOfAllSections = jQuery('[id^="section-"]').length; 
var nr = oldNr == nrOfAllSections ? 1 : oldNr+1; 
if(oldNr == nrOfAllSections) { 
    jQuery(this).text("Top ▴"); 
    } else { 
    jQuery(this).text("Down ▾"); 
    } 
var newHash = "#"+oldHash[0]+"-"+ nr; 
jQuery(this).attr("href", newHash); 
}); 

jQuery(document).on('click', "#scrollToInfo", function(e) { 
    e.preventDefault(); 
    var nrOfAllSections = jQuery('[id^="section-"]').length; 
    var hrefHash = "#section-" + nrOfAllSections; 
    var ypos = jQuery(hrefHash).offset().top; 
    window.scrollTo(0, ypos); 
    jQuery('a#scrollToBottom').text("Top ▴").attr("href", "#section-1"); 
}); 

});

出典

2016-10-01 Torbjörn Hedberg

この技術を使用し、私はあなたが助けを必要とする理由に困惑しています。 *「これが行われた場所で多くの例が見られました」*これらの例を使用するだけではどうですか？明らかにそれはあなたのソースコードに合うようにその一部を編集することを意味します.... – NewToJS

$("#link").click(function() { 
     if ($("#tog_A").is(":visible")) { 
     $("#tog_A").hide(); 
     $("#tog_B").show(); 
     } else { 
     $("#tog_B").hide(); 
     $("#tog_A").show(); 
     } 
    });

出典

2016-10-01 16:33:07

<head> 
<script> 
    var toggle = function() { 
    var mydiv = document.getElementById('tog_A'); 
    var mydiv2 = document.getElementById('tog_B'); 
    if (mydiv.style.display === 'none' || mydiv.style.display === '' ||  mydiv2.style.display === 'none' || mydiv2.style.display === '') 
    mydiv.style.display = 'block'; 
    mydiv2.style.display = 'block'; 

else 
    mydiv.style.display = 'none' 
    mydiv2.style.display= 'none' 
} 

</script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="tog_A" style="display:none;"> 
    <div id="tog_B" style="display:none;" > 
</div> 

    <a href="#" onclick="toggle();" id="link">Toggle</a> 
<body>

出典

2016-10-01 16:51:03

これは私のウェブサイト上で動作します。 –

2つのdivの間で非表示/表示を切り替えるjQuery

答えて

関連する問題