表現が明確ではありませんが、最初に図で説明します。
私が実現したいのは
上の図に示すように、対応する左側を表示します。パネル (実装済み)
左側のパネルをクリックすると、折りたたみパネルが表示されます。 実装済み
a タグのターゲットはこのページの属性値です。
、これも新しいページです。デフォルトでは、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>
html フレームセット
お願いします。 VS を使用してそれを実現する方法
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
