如何在不使用HTML框架的情况下执行此操作？

Question

我有这样的要求:

• 我有三个主题,每个主题都有一组子主题.当我单击某个主题时,子主题应显示在页面的右侧.

我想过为这个实现使用框架.但是,正如有人建议避免使用框架,我无法找到如何做到这一点的方法.是否可以在不使用单个页面内的框架和逻辑的情况下实现此目的？

Answer 1

您可以使用Ajax,轻松使用Ajax,使用jquery库:

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
           $("#topic1").click(function(){
            $('#result').load('topic1.html');
           }); 

           $("#topic2").click(function(){
            $('#result').load('topic2.html');
           });
         });
    </script>
<ul>
    <li><a id="topic1" href="#">Topic 1</a></li>
    <li><a id="topic2" href="#">Topic 2</a></li>
    <li><a id="topic3" href="#">Topic 3</a></li>
</ul>
<div id="result" style="clear:both;">
</div>

您可以通过声明一个对象{link1:page1,link2:page2}来改进此代码,然后对其进行预处理,并为每个道具编写单击函数.