Question

我希望图像充当切换，所以当点击它时会显示带文字的div。

这是我正在使用的CSS类：

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

和JS：

 function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
}//

这是HTML：

<div class="4u">                    
   <!-- Box -->
   <section class="box box-feature">
      <a href="javascript:unhide('test');" class="image image-full" 
      <img src="images/pic01.jpg" alt="" /></a>
   <div id="test" class="hidden">
       <header>
       <h2>Put something here</h2>
       <span class="byline">Maybe here as well I think</span>
       </header>
<p>Test and more text and more text and more text.</p>
    </div>                          
   </section>
  </div>

Answer 1

您遇到语法错误。将第4行更改为：

  <a href="javascript:unhide('test');" class="image image-full">

请注意该行末尾的>。

除非您决定使用vanilla JavaScript，否则更简单的方法是使用jQuery。将其添加到您的<head>：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后您的a href可能只是javascript:$('#test').toggle()，您不需要定义任何函数或CSS类。

显示/隐藏图像DIV

1 个答案: