Question

我正在寻求JQuery编码问题的帮助。

它是什么：我在<ul>水平行中有8个链接。在这些链接下方，我有一个<div>，它将显示每个链接的内容。

例：
L =链接
DDD ... = Div

                L     L     L     L
                L     L     L     L

                DDDDDDDDDDDDDDDDDDD

编码帮助：我是JQuery的新手，我不知道我是否正在寻找正确的编码...但我想做的是在每个div标签上调用每个链接并显示不同的每个链接的内容。这个DIV标签也是一个slideToggle

当前的JQuery：

<script type="text/javascript">
    $(document).ready(function(){

        $("ul.columns li img").click(function(){
            $("#pressed").slideToggle("fast");
        });
        $('#pressed').hide();

    });

这是我的HTML代码

<div class="container">
    <div class="header">
        <div class="headerimg"><img src="#" /></div>
    </div>
    <div class="middlecolumn">
        <ul class="columns">
            <li>
                <a href="#"><img src="#" /></a>
                <div class="info">
                    <h2>News</h2>
                    <p>What is going on in the World</p>
                </div>
            </li>
            <li>
                <a href="#"><img src="#" /></a>
                <div class="info">
                    <h2>News</h2>
                    <p>What is going on in the World</p>
                </div>
            </li>
                    </ul>
  </div>
  <div id="panel">
        <div id="pressed">Check this out!</div>
  </div>
  <div class="footer"></div>
</div>

Answer 1

肯定需要更多来自你身边的代码，但我想我明白了。类似的东西？

function swichDiv(link){
    $("#pressed").slideToggle("fast");
    $("#pressed").html('<iframe style="width:100%;height:100%;" src="'+link+'"/>')    
    $("#pressed").slideToggle("fast");
});

UNTESTED，会在更多信息后更新...但是可以这样做（也可以在数组中存储信息，并根据img的URL或类似的内容来执行。）

JQuery编码 - 多个链接slideToggle 1 div标签和不同的内容

1 个答案: