0

我正在使用以下代码，它运行良好，但我想在 Show 处于活动状态时<div id"Show">切换。<div id"hide">有谁知道如何做到这一点？

    <!--Script for Show Hide-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("#aboutcontent").hide();
  });
  $("#show").click(function(){
    $("#aboutcontent").show();
  });
});
</script>
<!--/script for show hide-->

HTML：

<div class="homepage-acecontent">
<div id="show"><img align="left"  style="margin-right:5px;" src="/template/images/btn-expand.png" border="0" alt="" /> ABOUT GENUINE H-D<sup>&reg;</sup> WORK WEAR</div>
<div id="hide"><img align="left"  style="margin-right:5px;" src="/template/images/btn-close.png" border="0" alt="" /></div>
<div id="aboutcontent">Content to show and hide goes here<!--/aboutcontent--></div>
<!--/homepage-acecontent--></div>

CSS：

 .homepage-acecontent{float:left; width: 1148px; color:#ff6418; font-size:11px; font-weight:bold; margin-left:40px;}
#aboutcontent{float:left; width: 1148px; color:#fff; font-size:14px; font-weight:normal; **display:none;**}
#aboutcontent a:link, #aboutcontent a:visited{color:#ff6418; text-decoration:none;}
#aboutcontent a:hover{color:#f68428;}
#show{cursor:pointer;}
4

6 回答 6

1

你的意思是像

$("#hide").click(function(){
    $("#aboutcontent").hide();
    $("#show").show();
    $(this).hide();
}).hide();
$("#show").click(function(){
    $("#aboutcontent").show();
    $("#hide").show();
    $(this).hide();
});

它将隐藏您按下的 div 并显示另一个。它还将默认隐藏 div 为隐藏。

于 2013-09-19T15:40:29.263 回答
1

不要切换id，切换类。

你可以这样做：

<div id="button_1" class="show"></div>
<div id="button_2" class="hide"></div>

然后使用.addClassand.removeClass交换类。

通常，您希望避免进行任何类型的样式操作。切换类是首选方式，因为您的所有状态都是预定义且显式的；您可以制作一个显示所有状态的静态 HTML 页面。甚至使用.show()或.hide()违反了这一原则。

于 2013-09-19T15:40:39.373 回答
1

js：

$(document).ready(function(){
  $("#control").click(function(){
    this.classToggle("hide");
    $("#aboutcontent").toggle();
  });
});

html:

<div id="control"> ABOUT GENUINE H-D<sup>&reg;</sup> WORK WEAR</div>
<div id="aboutcontent">Content to show and hide goes here<!--/aboutcontent--></div>
<!--/homepage-acecontent--></div>

CSS：

#control {
   cursor:pointer;
   background-image:url("/template/images/btn-expand.png");
   padding-left:50px; /* your image width */
   margin-right:5px;
   text-align:right;
}
#control .hide{
   background-image:url("/template/images/btn-close.png");
}

参考：

于 2013-09-19T16:01:56.393 回答
0

鉴于您当前的代码，最简单的方法是更新您的 JavaScript 代码：

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

    //Toggle show/hide
    $(this).hide();
    $("#show").show();
  });
  $("#show").click(function(){
    $("#aboutcontent").show();

    //Toggle show/hide
    $(this).hide();
    $("#hide").show();
  });
});
</script>

您可以对 html/JS 进行一些其他优化以提高效率，但这将帮助您开始并解决您的问题。

于 2013-09-19T15:41:59.177 回答
0

只需使用 jQuery 使用 attr 方法更改 ID

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("#aboutcontent").hide();
    $(this).attr("id","Show");
  });
  $("#show").click(function(){
    $("#aboutcontent").show();
    $(this).attr("id","Hide");
  });
});

于 2013-09-19T15:41:01.683 回答
0

您的问题不是很清楚，但我想您是在问如何在单击显示按钮时显示隐藏按钮，反之亦然？如果是这样...

<script>
    $(document).ready(function(){
      $("#hide").click(function(){
          $("#aboutcontent,#hide").hide();
          $("#show").show();
      });
      $("#show").click(function(){
          $("#aboutcontent,#hide").show();
          $("#show").hide();
      });
    });
</script>
于 2013-09-19T15:41:15.520 回答