Heim >Backend-Entwicklung >PHP-Tutorial >请问后台左侧面板点击 跳转新页面 左侧面板如何还能保持？thinkphp 3.2
请问后台左侧面板点击 跳转新页面 左侧面板如何还能保持？thinkphp 3.2
- WBOYOriginal
- 2016-06-20 12:27:371233Durchsuche
表达不清 先上图说下
想实现的是
如上图 顶部导航点击显示对应左侧面板 （已实现）
在左侧面板点击显示折叠面板 已实现
折叠面板里的链接点击就是新的页面链接了 虽然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 链接后面加参数这样？
一般这样的效果都怎么实现呢
求指点
回复讨论(解决方案)
html frameset
想问一下。用VS做 怎么来实现
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：某些环境下绕过php后缀黑名单上传webshellNächster Artikel：ajax提交base64图片编码，php服务器端接收不到
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)