0

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

我有这个 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'));
    });

});
4

3 回答 3

1

将您的CSS设置为最初隐藏“showme”

.showme { display:none}

并将您的 schipt 更改为此

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

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

});

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

于 2013-01-26T09:29:05.683 回答
0

也许这会做你想做的

$(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;

}

于 2013-01-26T10:11:36.330 回答
0

在您的 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>
于 2013-01-26T09:42:20.490 回答