JQuery顯示/隱藏問題

-1

我有幾個鏈接可以在點擊時更改Div中的內容。現在，其中一個鏈接有新的內容，我試圖用一個新的替換現有的div如下JQuery顯示/隱藏問題

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>

我做了一些搜索和發現的類名可以用這種方式（以上）進行訪問。

來源

2013-10-07 ultimatecoder

請顯示您的HTML。你是故意只針對.tos和.faq的第一個實例嗎？ – isherwood

如果您使用jQuery，您還應該將它用於選擇器，即'$（'。tos'）'和'$（'。faq'）'。 – SamV

我在HTML（或任何鏈接，期間）中看不到.tos或.faq。是的，你可以通過這種方式訪問類，但如果你有jQuery可用，它是不必要的笨拙。 – isherwood

使用jQuery選擇器，這裏是一個工作的JSFiddle。當通過jQuery選擇元素時，#或'散列'用於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(); 
});

來源

2013-10-07 17:53:06 SamV

謝謝，幫助:) – ultimatecoder

@ultimatecoder請接受它作爲正確答案，否則它顯示在未答覆的列表:) – SamV

如果你使用jQuery，你應該放棄使用getElementsByClassName。這可能會解決您的問題。

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

來源

2013-10-07 17:46:12 bradcush

通過隱藏你的div嘗試這種方式你想隱藏在頁面加載

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

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

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

}）;

來源

2013-10-07 18:29:23

JQuery顯示/隱藏問題

回答

相關問題