Question

基本上，我有一个关于我的页面，它将显示关于部分的摘要，在这下面是一个按钮，一旦点击我希望它隐藏摘要部分并显示详细的DIV。我目前有以下代码，只切换详细部分，不隐藏摘要部分。感谢：

HTML：

<div class="row" class="unhidden" id="about_basic">
    <!-- Summary Content Here -->
</div>

<a href="javascript:unhide('about_detailed');" class="btn-large">View Detail</a>
<!-- The Javascript in the href tag needs to unhide the about_detailed section (As it does here) but THEN hide the about_basic section. -->

<div id="about_detailed" class="hidden">
    <!-- Detailed Content Here -->
</div>

使用Javascript：

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

CSS：

.hidden { display: none; }
.unhidden { display: block; }

Answer 1

首先，编写javascript“inline”（即作为HTML元素的属性）被认为是不好的形式。它有效，但很难维护。

此外，jQuery很好地处理了这个...... 不需要取消隐藏功能，或者隐藏/取消隐藏的css类

jsFiddle Demo

<强> jQuery的：

$('.btn-large').click(function() {
    $('#about_basic').toggle();
    $('#about_detailed').toggle();
});

Answer 2

更改

<a href="javascript:unhide('about_detailed');" 
   class="btn-large">
     View Detail
</a>

到

<a href="javascript:unhide('about_detailed');unhide('about_basic')" 
   class="btn-large">
     View Detail
</a>

会将about_basic部分与about_detailed部分一起切换。

单击时显示和隐藏div

2 个答案: