バックグラウンドで左パネルをクリックして新しいページにジャンプし、左パネルを維持するにはどうすればよいですか? thinkphp 3.2-PHPチュートリアル-php.cn

ディスカッションへの返信(解決策)

ホームページ

バックエンド開発

PHPチュートリアル

バックグラウンドで左パネルをクリックして新しいページにジャンプし、左パネルを維持するにはどうすればよいですか? thinkphp 3.2

Jun 20, 2016 pm 12:27 PM

表現が明確ではありませんが、最初に図で説明します。
私が実現したいのは

上の図に示すように、対応する左側を表示します。パネル (実装済み)
左側のパネルをクリックすると、折りたたみパネルが表示されます。実装済み
a タグのターゲットはこのページの属性値です。
、これも新しいページです。デフォルトでは、Jquery は左側に最初のページを表示します。

一般的には、クリックしたもの、またはクリックされた状態が保持されるものではないでしょうか?

&lt;html&gt;&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;meta charset=&quot;utf-8&quot;/&gt;&lt;/head&gt;&lt;body&gt;&lt;style type=&quot;text/css&quot;&gt;    body {        margin: 0px;    }&lt;/style&gt;&lt;style type=&quot;text/css&quot;&gt;        /*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;        }    &lt;/style&gt;    &lt;div class=&quot;header&quot;&gt;        &lt;div class=&quot;logo&quot;&gt;            xxxcms        &lt;/div&gt;               &lt;div class=&quot;nav&quot;&gt;            &lt;em&gt;首页&lt;/em&gt;            &lt;em&gt;全局设置&lt;/em&gt;            &lt;em&gt;用户&lt;/em&gt;            &lt;em&gt;文章&lt;/em&gt;            &lt;em&gt;数据库&lt;/em&gt;            &lt;em&gt;缓存&lt;/em&gt;        &lt;/div&gt;        &lt;!--登陆后 显示用户名--&gt;        &lt;div class=&quot;login_center&quot;&gt;            &lt;p&gt;                &lt;span&gt;欢迎登陆xxxcms系统，&lt;/span&gt;{$username},(身份：管理员)                &lt;span&gt;&lt;a href=&quot;#&quot;                         target=&quot;_self&quot;&gt;退出&lt;/a&gt;&lt;/span&gt;                &lt;span&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;前台首页&lt;/a&gt;&lt;/span&gt;            &lt;/p&gt;        &lt;/div&gt;    &lt;/div&gt;  &lt;script type=&quot;text/javascript&quot; src=&quot;http://photo.no5.com.cn/page_2014/js/jquery-1.6.4.min.js?v=20140319&quot;&gt;&lt;/script&gt;    &lt;script type=&quot;text/javascript&quot;&gt;        $().ready(function () {           //DOM加载完成 第一显示 同辈元隐藏            $(&quot;.menu_left_list&quot;).eq(index).show().siblings().hide();        })		&lt;/script&gt;  &lt;div style=&quot;width: 100%; overflow: hidden; background: #eff0ee;&quot;&gt;    &lt;!--左侧菜单 --&gt;    &lt;block name=&quot;left&quot;&gt;        &lt;style type=&quot;text/css&quot;&gt;            /*左侧面板位置*/            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;            }        &lt;/style&gt;        &lt;div class=&quot;left_panel&quot;&gt;            &lt;div class=&quot;menu_left_list&quot;&gt;                常用操作                浏览记录            &lt;/div&gt;            &lt;div class=&quot;menu_left_list&quot;&gt;               &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;网站设置&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;基本设置&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;全局设置&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;安全设置&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;成员管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;管理员设置&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;会员设置&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;菜单管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;首页菜单&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;            &lt;/div&gt;            &lt;div class=&quot;menu_left_list&quot;&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;权限管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;权限列表&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;用户组权限&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;会员权限&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;            &lt;/div&gt;            &lt;div class=&quot;menu_left_list&quot;&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;文章管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;发布文章&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;文章分类&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;文章列表&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;文章tag&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;栏目管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=“#” target=&quot;_self&quot; title=&quot;menu&quot;&gt;增加栏目&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;删除栏目&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;修改栏目&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;更新栏目&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;图片管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;增加文章&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;删除文章&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;修改文章&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;更新文章&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;            &lt;/div&gt;            &lt;div class=&quot;menu_left_list&quot;&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;网站备份&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;数据库备份&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;数据库还原&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;数据库缓存清理&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;            &lt;/div&gt;            &lt;div class=&quot;menu_left_list&quot;&gt;                &lt;dl class=&quot;slide_panel&quot;&gt;                    &lt;dt&gt;缓存管理&lt;/dt&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;更新HTML缓存&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;更新所有缓存&lt;/a&gt;&lt;/dd&gt;                    &lt;dd&gt;&lt;a href=&quot;#&quot; target=&quot;_self&quot;&gt;更新栏目缓存&lt;/a&gt;&lt;/dd&gt;                &lt;/dl&gt;            &lt;/div&gt;        &lt;/div&gt;    &lt;/script&gt;  &lt;script type=&quot;text/javascript&quot;&gt;  function toggle_dl_ele(click_ele,toggle_type,z_index) {                $(click_ele).click(function (event) {                          if (this == event.target) {                         toggle_type == &quot;on&quot;?$ (this).nextAll().toggle():false;                           if(z_index ==&quot;parent&quot;){                                    $(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({&quot;color&quot;: &quot;#000&quot;}).parent().siblings().find(&quot;a&quot;).css({&quot;color&quot;:&quot;#fff&quot;});                            }                            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(&quot;.header&quot;,&quot;.nav em&quot;,&quot;click&quot;,&quot;.menu_left_list&quot;,&quot;select&quot;)        &lt;/script&gt; &lt;style type=&quot;text/css&quot;&gt;        div.right {            width: 90%;            float: left;            overflow: hidden;        }    &lt;/style&gt; &lt;div class=&quot;right&quot;&gt;        &lt;!--右侧内容快--&gt;        &lt;block name=&quot;right&quot;&gt;            &lt;style type=&quot;text/css&quot;&gt;                div.right_panel {                    width: 90%;                    float: left;                }                div.right_panel div#right_content {                    width: 100%;                    float: right;                }            &lt;/style&gt;            &lt;div class=&quot;right_panel&quot;&gt;                &lt;div id=&quot;right_content&quot;&gt;                    &lt;p&gt;&lt;/p&gt;                    &lt;p&gt;&lt;/p&gt;                    &lt;p&gt;&lt;/p&gt;                &lt;/div&gt;            &lt;/div&gt;        &lt;/block&gt;    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

私が思うのは、ヘッダーと左側のパネルが両方ともパブリックであり、thinkphp テンプレートの継承を使用しているということです。
左側をクリックすると、サイド折りたたみパネルのリンクが直接新しいページを作成します。デフォルトでは、 DOM がロードされた後、最初の DOM が表示されます。ページが直接ジャンプする場合、Cookie リンクの後にパラメーターを追加するなど、他の方法でトリガーされたインデックスを記録する必要がありますか?

一般的にそのような効果を得るにはどうすればよいですか?

アドバイスをお願いします