jquery - JQuery 显示/隐藏问题

Question

我有一些链接可以在单击时更改 Div 中的内容。现在，其中一个链接有新内容，我正在尝试用新的 div 替换现有的 div，如下所示

var terms = document.getElementsByClassName("tos")[0];
var faqs = document.getElementsByClassName("faq")[0];
$(terms).click(function(){
 $("#menuitem").hide();
 $("#newterms").show();
});
$(faqs).click(function(){
 $("#newterms").hide();
 $("#menuitem").show();
});

这个想法是在单击“条款”以外的任何链接时隐藏#newterms。

上面的代码完全隐藏了#newterms，当我点击“terms”时不显示新的div。我不熟悉 JQuery 并且不确定我做错了什么。如果你们中的任何人能帮助我解决这个问题，那就太好了。

抱歉，这里是 HTML

<div id="contenttext">
 <div id="menuitem"></div>
 <div id="newterms">
  <p id="terms_header">Header</p>
  <div id="termsconds">Terms</div>
 </div>
</div>

我做了一些搜索，发现可以通过这种方式访问​​类名（上图）。

Answer 1

使用 jQuery 选择器，这是一个有效的 JSFiddle。当通过 jQuery 选择元素时，a#或“hash”用于ID属性，而“.或”用于class属性。

所以$('.class-name');或$('#id-name');

http://jsfiddle.net/GdSWX/1/

HTML

<a class="tos" href="#">TOS</a>
<br>
<a class="faq" href="#">FAQ</a>

<div id="contenttext">
    <div id="menuitem">menu item</div>
    <div id="newterms">
        <p id="terms_header">Header</p>
        <div id="termsconds">Terms</div>
    </div>
</div>

Javascript

var terms = $('.tos');
var faqs = $('.faq');

$(terms).click(function () {
    $("#menuitem").hide();
    $("#newterms").show();
});

$(faqs).click(function () {
    $("#newterms").hide();
    $("#menuitem").show();
});

如果您最初想隐藏两者之一，则在文档完全加载后执行隐藏/显示。

$(document).ready(function() {
    $("#newterms").hide();
    $("#menuitem").show();
});

Answer 2

如果你使用 jQuery，你应该放弃使用 getElementsByClassName。这可能会解决您的问题。

$('.tos').click(function(){
    $("#menuitem").hide();
    $("#newterms").show();
});
$(.faq).click(function(){
    $("#newterms").hide();
    $("#menuitem").show();
});

Answer 3

通过隐藏您想要在页面加载时隐藏的 div 来尝试这种方式

$(document).ready(function(){
   $("#newterms").hide();

$(".tos").click(function () {
    $("#menuitem").hide();
    $("#newterms").show();
    return false;
});

$(".faq").click(function () {
    $("#newterms").hide();
    $("#menuitem").show();
    return faslse;
});

});