单击链接后，文本将显示在多表格单元格下方。

Question

我有一个多表格单元格和行内部链接和javascript“tdhover”，现在每个链接链接到一个新页面，这是一个很大的页面“烦人”我试图实现类似于截图如下：

我目前的代码是简单的html和css：

<table style="padding:0px;font-size:10pt;"><tr><td><a href='/path/1/'>1-100</a></td><td><a href='/path/101/'>101-200</a></td> /* .....etc */

如果我点击链接，如果我点击新链接，我怎样才能达到每次点击链接并在表格下方显示文字的目标？

Answer 1

您可以在表格下方定义要显示文本的DIV。

使用jquery，您可以点击链接在DIV上显示文字。

Answer 2

如果您在同一页面中有内容，则可以使用jquery在div中显示特定文本（可能在数组或switch语句中）。

如果内容来自另一个页面，您可以使用ajax / jquery（.post / .ajax）来实现此目的。

另一个想法可能是定义一个iframe（首先隐藏），您将更改iframe的来源，因为您将点击每个链接并使其可见

希望有所帮助。请发布一些代码，看看你有多远。

Answer 3

只需创建一个想要显示文本的div（在表格下方）。并使用以下jquery代码：

$('#yourtableid a').click(function(){
    $.get($(this).attr('href'), function(data){
        $('#destination_div_id').html(data);
    })
});

这将显示目标div中链接页面的内容。

Answer 4

经过一天的努力工作，搜索文档和测试代码后，我最终找到了解决问题的方法。

这是显示/隐藏我的div

的jquery脚本

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){

$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});

});
</script> 

这是html代码：

<div class="menu">
<ul>
<li><a href="#" name="div1" >Home</a></li>
<li><a href="#" name="div2" >Page1</a></li>
<li><a href="#" name="div3" >page2</a></li>
<li><a href="#" name="div4" >page3</a></li>
</ul>
</div>

<div>

<div id="div1" style="display:none">
Hello World
</div>

<div id="div2" style="display:none">
Test
</div>

<div id="div3" style="display:none">
Another Test
</div>

<div id="div4" style="display:none">
Final Test
</div>


</div>

这是Demo