Question

我想知道如果我有一个带有图像和标题的列表的最佳方式是什么，当我点击图像上的一个时，它会在图像上方显示更多文本（隐藏图像），当您点击时在文本上它将再次显示图像。

如果我从头开始：

<ul>
<li>
<img src="image1.jpg"/><br>
Headline no1
<div> this is the text I want to show</div>
</li>

next li ....

那么最好的是什么？用jquery或其他一些建议来切换div？

感谢您的意见。

Answer 1

对于我的朋友，你需要javascript（JS），使用jquery，纯JS或任何你想要的。但是你需要在DOM中加载一个可见的对象而不是其他对象。并且使用JS更改对象样式中的display属性。

纯JS中的示例，带有div图像和div文本：

<script>
  function showHide(idShow, idHide) {
     document.getElementById(idShow).style.display = "";
     document.getElementById(idhide).style.display = "none";
  }
</script>

<div id="image" onclick="showHide("text", "image");">
    <img>....</img>
</div>
<div id="text" style="display: none;" onclick="showHide("image", "text");">
    <p> some text</p>
</div>

Answer 2

我想，这就是你要找的东西：

<ul>
<li>
    <img class="switch" src="image1.jpg"/>
    <div class="hide switch" > this is the text        
I want to show</div>
    <h1>Headline no1</h1>
</li>
<li>
    <img class="switch" src="image1.jpg"/>    <div class="switch hide"> this is the text I want to show 2</div>
    <h2>Headline no2</h2>
</li>

</ul>

使用这个jQuery代码：

$(document).ready( function(){

    $('.switch').click( function( ev ){
        var self = ev.currentTarget;
        var type = self.localName;
        var other;

        other = $(self).siblings( (type == 'div') ? 'img' : 'div' );

        $(self).addClass( 'hide' );
        other.removeClass( 'hide' );
    } );

} );

这是一个小提琴：http://jsfiddle.net/Qv862/1/

需要一些原因造型：）

如果将img放入div中，可以写得更简单：http://jsfiddle.net/Qv862/2/

在同一个li中加载不同的内容？

2 个答案: