Question

我有一些链接可以在点击时更改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选择元素时，#或'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;
});

}）;

JQuery显示/隐藏问题

3 个答案: