JQuery Show/Hide issue

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 в целом и не отображает новый 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, где в качестве . или «period» используется атрибут 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(); 
}); 

Если вы изначально хотите, чтобы скрыть одно из двух затем выполнить скрыть/показать после того, как документ ha s полностью загружен.

$(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

Попробуйте это так, скрывая свои дивы вы хотите скрытые загрузки страницы

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

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

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

});