Question

我检查了类似的问题，但找不到答案。

我有这个HTML：

<table>
<td>
<a href="#">click me</a>
<div class="showme"><p>test</p></div>
</td>
<td>
<a href="#">click me</a>
<div class="showme"><p>test 2</p></div>
</td>
<td>
<a href="#">click me</a>
<div class="showme"><p>test 3</p></div>
</td>
</table>

<div class="container" rel="showme"></div>

我想要的是：我希望最初隐藏div.showme，当点击TD内的链接时，div.showme会加载到div.container中。

我尝试了什么：

jQuery(document).ready(function($) {

    $("td a").click(function() {  
        $(".showme").html($(this).attr('rel'));
    });

});

Answer 1

设置你的css最初隐藏“showme”

.showme { display:none}

将你的schipt改为

jQuery(document).ready(function($) {

    $("td a").click(function() {  
        $(this).next().load($(this).attr('href'));
    });

});

请记住，您无法使用javascript打开外部链接，如果这是您要执行的操作，那么您可能需要使用iframe而不是div

Answer 2

在你的html中添加一个div

<table>
    <td>
        <a href="#">click me</a>
        <div class="showme">
            <p>
                test</p>
        </div>
    </td>
    <td>
        <a href="#">click me</a>
        <div class="showme">
            <p>
                test 2</p>
        </div>
    </td>
    <td>
        <a href="#">click me</a>
        <div class="showme">
            <p>
                test 3</p>
        </div>
    </td>
</table>
<div class="container"></div>

和像这样的脚本

 <style>
.showme { display:none}
</style>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $("td").click(function () {
            var tow = $(this);
            tow.find('div[class="showme"]').css('display', 'block');
            $('.container').html(tow.find('div[class="showme"]'));
        });
    });
</script>

Answer 3

也许这会做你想做的事情

$(function(){
        $("table td>a").click(function(e){
            e.preventDefault();
            //get the html content
            var cont = $(this).parent().children(".showme").html();
            //add it to the desired div
            $(".container").html(cont);
        });
    });

你需要一点css

.showme{
display: none;

}

从容器div中的td加载div，一次一个？

3 个答案: