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

Question

我不知道这是否可行或者可以做到但是我听说并且看到人们使用AJAX和iFrames获得了这些。

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

我想要发生的是当我点击其中一个编码为：

的项目时

 <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表单中

这是否可行，若然可以实现？

Answer 1

很有意思，你有一个id="content"的div应该在其中加载哪些内容：

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

使用按钮：

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

和脚本：

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