使用jquery做一个左侧导航栏固定,点击导航栏右侧内容改变的效果

图片说明

第一种方式用ajax调用；第二种方式先把内容生成用display控制显示。这是基础，你是刚玩js还是不想写代码
PS：我是无聊才回答的这个问题

初学你可以设计成点击左侧项目栏，调用不同的jsp页面，（方法简单，做工麻烦）
高级点就用ajax，实行点击事件，隐藏某些页面显示某些页面（可以都写在一个页面，对页面编写力有一定基础）

 <!DOCTYPE>
<html>
    <head>
    <script type="text/javascript">
    function f1() {
        $('#iframe').attr("src", "./子页面1.html");
    }
    <script/>
    </head>
    <body>
        <div>
            <ul>
                <li>
                    首页
                </li>
                <li>
                    <a>模块1</a>
                    <ul>
                        <li>
                            <a onclick="f1()" href="#">子页面1</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">子页面2</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">子页面3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a>模块1</a>
                    <ul>
                        <li>
                            <a href="#">子页面1</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">子页面2</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div> 
            <iframe id="iframe">

      </iframe>       
        </div>
    </body>
<html>

自己分配一下DIV布局 加点样式

用display实现吧，或者ajax

解决的方法很多 用iframe ，建议做左侧导航栏这种你应该是做后台，可以使用HPlus这种后台框架

给左边 做一个树 右边的大区域内 显示你要点击的内容（用frame实现） 也可以用div层实现

可以用angualr这类的框架做单页面跳转