javascript - 单击时显示和隐藏 div

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(即作为 HTML 元素的属性)被认为是不好的形式。它可以工作，但很难维护。

此外，jQuery 处理得很好... 不需要取消隐藏功能，或者隐藏/取消隐藏 css 类

jsFiddle Demo

jQuery:

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