Javascript 在同一页上加载不同的设计

我不知道这是否可能或可以做到，但我听说并看到人们使用AJAX和iFrames实现了tis

目前，我已经在页面左侧创建并设计了一个简单的垂直条：

我想做的是单击其中一个项目，其编码如下：

 <div id='cssmenu'>
        <ul>
            <li class='active'><a href='index.html'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>Products</span></a></li>
                <li><a href='#'><span>Product 1</span></a></li>
                <li><a href='#'><span>Product 2</span></a></li>
                <li><a href='#'><span>Product 2</span></a></li>
                <li><a href='#'><span>Product 2</span></a></li>
                <li><a href='#'><span>Product 2</span></a></li>
                <li><a href='#'><span>Product 2</span></a></li>
                <li><a href='#'><span>Product 2</span></a></li>
        </ul>
    </div>

当我点击一个不同的侧栏链接时，我希望加载一个不同的设计或页面，但在同一个web表单中

---

这是否可能？如果可能，如何实现

有趣的是，您有一个div，其中有

id=“content”

应该加载哪些内容：

$('.cssmenu').find('a').click(
    function(e)
    {
         e.preventDefault();
         $('#content').load($(this).attr('href'));
    }
);

使用按钮：

<input type="button" value="load content" id="loadtest">

---

Mobayen Khiaba我是否必须创建不同的ASPX页面，或者是否有方法创建不同的设计？您应该设计单独的ASPX页面（当前页面中没有html和正文标记）或者，您可以创建一个页面，使用switch case管理内容，并使用查询字符串发送案例：

…我认为最简单的方法是创建不同的页面，这会不会在创建更多页面时占用很多空间？代码页面不会占用很多空间，是吗？特别是它们将只包含需要加载的内容。例如，一个页面可能只有一个DIV标记，其中包含一些内容。如果我根据按钮点击来加载一个DIV，会怎么样？

$('#loadtest').click(function(){$('#content').load('test.aspx');});