Table of Contents
回复讨论(解决方案)
Home Backend Development PHP Tutorial 请问后台左侧面板点击 跳转新页面 左侧面板如何还能保持?thinkphp 3.2

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

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>
Copy after login

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

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

求指点  


回复讨论(解决方案)

html frameset

想问一下。用VS做  怎么来实现

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1253
24
Explain secure password hashing in PHP (e.g., password_hash, password_verify). Why not use MD5 or SHA1? Explain secure password hashing in PHP (e.g., password_hash, password_verify). Why not use MD5 or SHA1? Apr 17, 2025 am 12:06 AM

In PHP, password_hash and password_verify functions should be used to implement secure password hashing, and MD5 or SHA1 should not be used. 1) password_hash generates a hash containing salt values ​​to enhance security. 2) Password_verify verify password and ensure security by comparing hash values. 3) MD5 and SHA1 are vulnerable and lack salt values, and are not suitable for modern password security.

PHP and Python: Comparing Two Popular Programming Languages PHP and Python: Comparing Two Popular Programming Languages Apr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

PHP: A Key Language for Web Development PHP: A Key Language for Web Development Apr 13, 2025 am 12:08 AM

PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7

PHP in Action: Real-World Examples and Applications PHP in Action: Real-World Examples and Applications Apr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

How does PHP type hinting work, including scalar types, return types, union types, and nullable types? How does PHP type hinting work, including scalar types, return types, union types, and nullable types? Apr 17, 2025 am 12:25 AM

PHP type prompts to improve code quality and readability. 1) Scalar type tips: Since PHP7.0, basic data types are allowed to be specified in function parameters, such as int, float, etc. 2) Return type prompt: Ensure the consistency of the function return value type. 3) Union type prompt: Since PHP8.0, multiple types are allowed to be specified in function parameters or return values. 4) Nullable type prompt: Allows to include null values ​​and handle functions that may return null values.

The Enduring Relevance of PHP: Is It Still Alive? The Enduring Relevance of PHP: Is It Still Alive? Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

PHP vs. Other Languages: A Comparison PHP vs. Other Languages: A Comparison Apr 13, 2025 am 12:19 AM

PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.

PHP and Python: Different Paradigms Explained PHP and Python: Different Paradigms Explained Apr 18, 2025 am 12:26 AM

PHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.

See all articles