请问后台左侧面板点击跳转新页面左侧面板如何还能保持？thinkphp 3.2-php教程-PHP中文网

回复讨论(解决方案)

首页

后端开发

php教程

请问后台左侧面板点击跳转新页面左侧面板如何还能保持？thinkphp 3.2

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 20, 2016 pm 12:27 PM

表达不清先上图说下
想实现的是

如上图顶部导航点击显示对应左侧面板（已实现）
在左侧面板点击显示折叠面板已实现
折叠面板里的链接点击就是新的页面链接了虽然a标签target 是在本页的属性值
但也是新页面默认Jquery 就是显示左侧第一个了

一般不都是点击哪个还是保留点击状态的么

<html><head>    <title></title>    <meta charset="utf-8"/></head><body><style type="text/css">    body {        margin: 0px;    }</style><style type="text/css">        /*base*/        dl dd{ margin-left: 0px;}        div.header {            width: 100%;            height: 7%;            border-bottom: 1px solid #333333;            background: #000;;        }        div.header div.logo {            width: 20%;            float: left;            overflow: hidden;            height: 100%;        }        div.header div.nav {            width: 60%;            float: left;            overflow: hidden;            height: 100%;        }        div.header div.nav em {            font-style: normal;            width: 8%;            color: #fff;            height: 100%;            line-height: 1em;            display: block;            float: left;            overflow: hidden;            text-align: center;            line-height: 2.8em;;        }        /*选中样式*/        .select {            background: #fff;            color: #000;        }        div.login_center {            width: 20%;            background: #fff;            height: 100%;            float: left;            color: #333;            font-size: 12px;        }    </style>    <div class="header">        <div class="logo">            xxxcms        </div>               <div class="nav">            <em>首页</em>            <em>全局设置</em>            <em>用户</em>            <em>文章</em>            <em>数据库</em>            <em>缓存</em>        </div>        <!--登陆后 显示用户名-->        <div class="login_center">            <p>                <span>欢迎登陆xxxcms系统，</span>{$username},(身份：管理员)                <span><a href="#"                         target="_self">退出</a></span>                <span><a href="#" target="_blank">前台首页</a></span>            </p>        </div>    </div>  <script type="text/javascript" src="http://photo.no5.com.cn/page_2014/js/jquery-1.6.4.min.js?v=20140319"></script>    <script type="text/javascript">        $().ready(function () {           //DOM加载完成 第一显示 同辈元隐藏            $(".menu_left_list").eq(index).show().siblings().hide();        })		</script>  <div style="width: 100%; overflow: hidden; background: #eff0ee;">    <!--左侧菜单 -->    <block name="left">        <style type="text/css">            /*左侧面板位置*/            div.left_panel {                width: 10%;                float: left;                height: 100%;                overflow: hidden;                background: #000;            }            /*点击滑动上下菜单*/            div.left_panel dl.slide_panel dt {                text-align: center;                font-size: 1.2em;                margin-bottom: 5px;                height: 30px;                line-height: 30px;            }            div.left_panel dl.slide_panel dd {                display: none;                margin-bottom: 5px;                height: 28px;                line-height: 28px;                text-align: center;            }            div.left_panel dl.slide_panel dd a {                font-size: 12px;                color: #fff;                text-decoration: none;            }            /*头部导航滑动门*/            div.menu_left_list {                display: none;                color: #fff;            }        </style>        <div class="left_panel">            <div class="menu_left_list">                常用操作                浏览记录            </div>            <div class="menu_left_list">               <dl class="slide_panel">                    <dt>网站设置</dt>                    <dd><a href="#" target="_self">基本设置</a></dd>                    <dd><a href="#" target="_self">全局设置</a></dd>                    <dd><a href="#" target="_self">安全设置</a></dd>                </dl>                <dl class="slide_panel">                    <dt>成员管理</dt>                    <dd><a href="#" target="_self">管理员设置</a></dd>                    <dd><a href="#" target="_self">会员设置</a></dd>                </dl>                <dl class="slide_panel">                    <dt>菜单管理</dt>                    <dd><a href="#" target="_self">首页菜单</a></dd>                </dl>            </div>            <div class="menu_left_list">                <dl class="slide_panel">                    <dt>权限管理</dt>                    <dd><a href="#" target="_self">权限列表</a></dd>                    <dd><a href="#" target="_self">用户组权限</a></dd>                    <dd><a href="#" target="_self">会员权限</a></dd>                </dl>            </div>            <div class="menu_left_list">                <dl class="slide_panel">                    <dt>文章管理</dt>                    <dd><a href="#" target="_self">发布文章</a></dd>                    <dd><a href="#" target="_self">文章分类</a></dd>                    <dd><a href="#" target="_self">文章列表</a></dd>                    <dd><a href="#" target="_self">文章tag</a></dd>                </dl>                <dl class="slide_panel">                    <dt>栏目管理</dt>                    <dd><a href=“#” target="_self" title="menu">增加栏目</a></dd>                    <dd><a href="#" target="_self">删除栏目</a></dd>                    <dd><a href="#" target="_self">修改栏目</a></dd>                    <dd><a href="#" target="_self">更新栏目</a></dd>                </dl>                <dl class="slide_panel">                    <dt>图片管理</dt>                    <dd><a href="#" target="_self">增加文章</a></dd>                    <dd><a href="#" target="_self">删除文章</a></dd>                    <dd><a href="#" target="_self">修改文章</a></dd>                    <dd><a href="#" target="_self">更新文章</a></dd>                </dl>            </div>            <div class="menu_left_list">                <dl class="slide_panel">                    <dt>网站备份</dt>                    <dd><a href="#" target="_self">数据库备份</a></dd>                    <dd><a href="#" target="_self">数据库还原</a></dd>                    <dd><a href="#" target="_self">数据库缓存清理</a></dd>                </dl>            </div>            <div class="menu_left_list">                <dl class="slide_panel">                    <dt>缓存管理</dt>                    <dd><a href="#" target="_self">更新HTML缓存</a></dd>                    <dd><a href="#" target="_self">更新所有缓存</a></dd>                    <dd><a href="#" target="_self">更新栏目缓存</a></dd>                </dl>            </div>        </div>    </script>  <script type="text/javascript">  function toggle_dl_ele(click_ele,toggle_type,z_index) {                $(click_ele).click(function (event) {                          if (this == event.target) {                         toggle_type == "on"?$ (this).nextAll().toggle():false;                           if(z_index =="parent"){                                    $(this).addClass('select').siblings('.select').removeClass('select');                                    $('.menu_left_list .slide_panel dd ').removeClass('select');                                }                                else{                                    $(this).addClass('select').siblings().removeClass('select');                                  $('.menu_left_list .slide_panel dt ').removeClass('select');                                }                               $(this).find('a:first').css({"color": "#000"}).parent().siblings().find("a").css({"color":"#fff"});                            }                            else {}  }) }            toggle_dl_ele('dl.slide_panel dt','on','parent');                    toggle_dl_ele('dl.slide_panel dd','off','son');              function tab(event_parent_ele,event_ele,event_type,content_ele,add_class){                       $(event_parent_ele).delegate(event_ele,event_type , function (event) {                       if (this == event.target) {                        var index = $(this).index();                        $(content_ele).eq(index).toggle().siblings().hide();                      $(this).addClass(add_class).css({'color': '#000' }).siblings().removeClass(add_class).css({'color': '#fff'});                                          } else {                        return false;                    }                })            }            tab(".header",".nav em","click",".menu_left_list","select")        </script> <style type="text/css">        div.right {            width: 90%;            float: left;            overflow: hidden;        }    </style> <div class="right">        <!--右侧内容快-->        <block name="right">            <style type="text/css">                div.right_panel {                    width: 90%;                    float: left;                }                div.right_panel div#right_content {                    width: 100%;                    float: right;                }            </style>            <div class="right_panel">                <div id="right_content">                    <p></p>                    <p></p>                    <p></p>                </div>            </div>        </block>    </div></div></body></html>

登录后复制

我想的是头部和左侧面板都是公用的  用的thinkphp 模板继承
点击左侧折叠面板链接直接新页面了  默认DOM 加载完成就是显示第一个的  直接页面跳转的话必须用其他的方式记录触发的索引么比如cookies 链接后面加参数这样？

一般这样的效果都怎么实现呢

求指点