jquery hide /顯示

嗨每1我有一個問題，在我的jquery我想這調整此cods能夠隱藏圖像/文本時頁面打開，這意味着什麼都沒有出現，當我打開頁面時只有按鈕，當我點擊它的圖像/文字出現，我想要什麼可以幫助我？jquery hide /顯示

<html> 
<head> 

<script type="text/javascript"> 

function show_menu(id){ 
    document.getElementById(id).style.display = "block"; 
    } 

function hide_menu(id){ 
    document.getElementById(id).style.display = "none"; 
    } 


</script> 
</head> 


<body> 

<button onclick="if (document.getElementById('idOfDiv').style.display=='none') show_menu('idOfDiv'); else hide_menu('idOfDiv');">Show/Hide</button> 

<div id="idOfDiv"> 
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> 
    text text text text text text text text text....</div> 
</body> 
</html>

來源

2012-02-24 Ahmet agha

當頁面加載時應該隱藏，當你點擊按鈕時，它應該顯示..多數民衆贊成你想要的？ – 2012-02-24 12:11:32

刪除了'java'標記。 Java對Javascript來說，那就是Car Carpet。完全不相關。 – Curt 2012-02-24 12:15:01

他們有什麼共同點，就是大量的Java消耗在開發它們;） – mindandmedia 2012-02-24 12:16:47

使用jQuery這可以在一個函數來完成：

<script type="text/javascript"> 

function showhide_menu(id){ 
    $("#" + id).toggle(); 
} 

</script> 

<button onclick="showhide_menu('idOfDiv');">Show/Hide</button> 

<div id="idOfDiv" style="display:none;"> 
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> 
    text text text text text text text text text....</div>

來源

2012-02-24 12:13:44 Curt

謝謝你這是非常好的，但你沒有解決我的問題，當我打開頁面沒有什麼只顯示按鈕，當我點擊按鈕，我可以顯示或隱藏它再:) :) – 2012-02-24 12:37:40

@Ahmetağa - 我已經做了修改，以包括'div'與'display：none'來隱藏加載元素。 – Curt 2012-02-24 12:39:30

謝謝你現在很好，很簡單，但哪一個黃油網站鱈魚或尼古拉Peluchetti或dku.rajkumar所有你給我一個不同的鱈魚和所有這些鱈魚工作，因爲我想，但哪一個最好的網站？ ??? – 2012-02-24 20:45:05

你可以做（使用jQuery作爲你的要求）

$(document).ready(function(){ 
    $('#idOfDiv').hide(); 
    $('button').click(function(){ 
    var idOf = $('#idOfDiv'); 
    if(idOf.is(':visible')){ 
     idOf.hide(); 
    }else{ 
     idOf.show(); 
    } 
    }); 
});

HTML

<body> 

<button >Show/Hide</button> 

<div id="idOfDiv"> 
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> 
    text text text text text text text text text....</div> 
</body>

來源

2012-02-24 12:12:44

身體呢？ – 2012-02-24 12:24:36

thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaank youuuuuuuuu finaly :) – 2012-02-24 12:51:09

不錯的解決方案，但使用toggle（）函數在我看來好多了。例如@Curt – Neysor 2012-02-24 14:14:22

您可以使用jQuery的.toggle()。

HTML

<div id="idOfDiv" style="display:none;"> 
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> 
    text text text text text text text text text....</div>

的JavaScript

$("#btn").click(function(e) { 
    $("#idOfDiv").toggle(); 
});

演示上jsFiddle。

希望這可以幫助你。

來源

2012-02-24 12:13:32

改變這一點，隱藏在頁面加載

<div id="idOfDiv" style="display:none;">

jQuery的

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('button').click(function(){ 
    $('#idOfDiv').toggle(); 
    }); 
}); 
</script>

來源

2012-02-24 12:13:46

謝謝你它是好的，但按鈕的工作只顯示我想要顯示和隱藏;） – 2012-02-24 12:49:25

多數民衆贊成是我的不好...更新..我也知道它也是遲到:) – 2012-02-24 14:42:12

哇非常好的鱈魚與美麗的工作，現在我喜歡.toggle（）這是好現在我知道什麼是.toggle做謝謝你:) 我有另一個問題我該如何添加你作爲一個朋友在這個網站我在這裏是新的倪想要朋友互相幫助 – 2012-02-24 15:59:27

你不顯得使用jquery，因爲如果你願意，你的代碼看起來更像這樣：

<a href='#' class='action'>Show/Hide</a> 
<div id="idOfDiv" style='display:none'> 
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> 
    text text text text text text text text text....</div> 

$(document).ready(function(){ 
    $('.action').click(function(){$('#idOfDiv').toggle();}); 
});

來源

2012-02-24 12:13:58 mindandmedia

使用jQuery肘節（）http://api.jquery.com/toggle/

HTML：

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
    <button>Toggle</button> 
<p id="hi">Hello</p> 
</body> 
</html>

JQUERY：

$("button").click(function() { 
    $("#hi").toggle(); 
});

看到結果：http://jsfiddle.net/5YKRb/1/

來源

2012-02-24 12:15:24 Neysor

<html> 
<head> 
</head> 
<body> 
<button onclick="$('#idOfDiv').toggle();">Show/Hide</button> 
<div id="idOfDiv"> 
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> 
    text text text text text text text text text....</div> 
</body> 
<script> 
$(document).ready(function(){ 
    $('#idOfDiv').hide(); 
}); 
</script> 
</html>

來源

2012-02-24 12:17:46 Alex

或者您可以使用「切換」功能。

$(document).ready(function(){ 
    $('#idOfDiv').hide(); 
    $('button').toggle(
     function(){ 
     $("#idOfDiv").show(); 
     }, 
     function() { 
     $("#idOfDiv").hide(); 
     } 
    ); 
});

來源

2012-02-24 12:17:49 Vishal

jquery hide /顯示

回答

相關問題