Question

嗨每1我在我的jquery中有一个问题我希望这个调整这个鳕鱼能够在页面打开时隐藏图像/文本，这意味着当我点击它时我只打开页面时没有任何内容出现图像/文字出现，我想要怎么能帮助我？

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

Answer 1

使用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>

Answer 2

你可以做（按照你的要求使用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>

Answer 3

使用jquery toggle（）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/

Answer 4

您可以使用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上的演示。

希望这会对你有所帮助。

Answer 5

更改此项，以隐藏页面加载

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

jquery的

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

Answer 6

你似乎没有使用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();});
});

Answer 7

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

Answer 8

或者你可以使用'切换'功能。

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

jquery hide / show

8 个答案: