在两个div之间切换隐藏/显示jQuery

我在尝试获取将切换两个div之间隐藏/显示的链接。没有什么奇怪的，我已经看到了很多这方面的例子。我的基本的HTML结构如下：在两个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代码冲突我现场使用。我是一个真正的n00b当涉及到JavaScript，所以也许有人可以指出我在正确的方向，也许可以帮助我结合我的现有代码与新的。

现有的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

这适用于我的网站，我用它如果人们正在查看我的网站在移动工作适合我。 –

在两个div之间切换隐藏/显示jQuery

回答

相关问题