广告联盟网

标题: 这种网页效果这么实现 [打印本页]

作者: 咖啡 时间: 2007-5-7
标题: 这种网页效果这么实现
像sohu论坛一样的效果。
http://club.mil.news.sohu.com/newsmain.php?b=shilin&c=102&a=699837

页面分两部分，左边显示链接，右边是链接的内容。如何实现。

我不需要sohu那种太复杂。我只需要做的是左边是20个笑话的标题链接，点了后右边就显示出笑话内容了。

作者: 1987o331 时间: 2007-5-8
在DW里有专门的功能来实现

作者: actad 时间: 2007-5-8
拿下面这段代码在body里看一看，使用了div的滚动条和锚点。
另外也可以用js的无刷新更新方式，左侧放标题链接，点击链接以后利用innerHTML进行右侧内容的替换。

<body>
<div id="leftnav" style="float:left;width:20%;">
<ul>
<li><a href="#item1">第一条笑话</a></li>
<li><a href="#item2">第二条笑话</a></li>
<li><a href="#item3">第三条笑话</a></li>
<li><a href="#item4">第四条笑话</a></li>
<li><a href="#item5">第五条笑话</a></li>
<li><a href="#item6">第六条笑话</a></li>
<li><a href="#item7">第七条笑话</a></li>
<li><a href="#item8">第八条笑话</a></li>
<li><a href="#item9">第九条笑话</a></li>
<li><a href="#item10">第十条笑话</a></li>
</ul>
</div>

<div id="rightcon" style="float:left;width:80%;overflow: scroll; overflow-x:hidden;height:500px;">
<a name="#item1">第一条笑话</a>　　第一条笑话的内容1
<a name="#item2">第二条笑话</a>　　第二条笑话的内容22
<a name="#item3">第三条笑话</a>　　第三条笑话的内容333
<a name="#item4">第四条笑话</a>　　第四条笑话的内容4444
<a name="#item5">第五条笑话</a>　　第五条笑话的内容55555
<a name="#item6">第六条笑话</a>　　第六条笑话的内容666666
<a name="#item7">第七条笑话</a>　　第七条笑话的内容7777777
<a name="#item8">第八条笑话</a>　　第八条笑话的内容88888888
<a name="#item9">第九条笑话</a>　　第九条笑话的内容999999999
<a name="#item10">第十条笑话</a>　　第十条笑话的内容000000000
</div>
</body>

作者: loveusd 时间: 2007-5-8
现实的方式有很多，框架，脚本，CSS，AJAX

作者: 咖啡 时间: 2007-5-8
谢谢大家了。

欢迎光临广告联盟网 (https://ggads.com/)