前端开发根据url进行页面跳转控制以及实现菜单栏手风琴效果
html中的元素:<ul id="accordion" class="accordion">
<li class="licss">
<div class="link"><i class="fa fa-home"></i></i>藏馆台账<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Maquetacion web</a></li>
</ul>
</li>
<li class="licss">
<div class="link"><i class="fa fa fa-bar-chart-o"></i>征集管理<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li id="clueinfo_index">
<a class="J_menuItem" href="{:U('ClueInfo/index')}">征集线索</a>
</li>
<li id="sourceinfo_index">
<a class="J_menuItem" href="{:U('SourceInfo/index')}">征集来源</a>
</li>
<li id="collectinfo_index">
<a class="J_menuItem" id="" href="{:U('CollectInfo/index')}">征集信息</a>
</li>
</ul>
</li>
<li class="licss">
<div class="link"><i class="fa fa-envelope"></i>藏品编目<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="{:U('CollectionInfo/index')}">藏品登记</a>
</li>
<li><a class="J_menuItem" href="mail_detail.html">影像编目</a>
</li>
<li><a class="J_menuItem" href="mail_compose.html">藏品审核</a>
</li>
<li><a class="J_menuItem" href="mail_compose.html">总账浏览</a>
</li>
<li><a class="J_menuItem" href="mail_compose.html">藏品鉴定</a>
</li>
<li><a class="J_menuItem" href="mail_compose.html">回收站</a>
</li>
</ul>
</li>
<li class="licss"><div class="link"><i class="fa fa-edit"></i>库房管理<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a class="J_menuItem" href="form_basic.html">藏品入库</a>
</li>
<li><a class="J_menuItem" href="form_validate.html">藏品移库</a>
</li>
<li><a class="J_menuItem" href="form_advanced.html">藏品出库</a>
</li>
<li><a class="J_menuItem" href="form_wizard.html">藏品归还</a>
</li>
<li><a class="J_menuItem" href="form_wizard.html">库房查询</a>
</li>
<li><a class="J_menuItem" href="form_wizard.html">日常维护</a>
</li>
</ul>
</li>
<li class="licss"><div class="link"><i class="fa fa-desktop"></i> 藏品管理<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a class="J_menuItem" href="contacts.html">日常事件</a>
</li>
<li><a class="J_menuItem" href="profile.html">藏品专题</a>
</li>
</ul>
</li>
<li class="licss"><div class="link"><i class="am-icon-th-list"></i>查询统计<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a class="J_menuItem" href="contacts.html">日常事件</a>
</li>
<li><a class="J_menuItem" href="profile.html">藏品专题</a>
</li>
</ul>
</li>
<li class="licss"><div class="link"><i class="am-icon-cog"></i>系统维护<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a class="J_menuItem" href="{:U('CollectionType/index')}">类别维护</a>
</li>
<li><a class="J_menuItem" href="carousel.html">古汉字管理</a>
</li>
<li><a class="J_menuItem" href="blueimp.html">编目导入</a>
</li>
</ul>
</li>
</ul>
js:
$(document).ready(function(){
var site_url = window.location.href.toLowerCase();//此处得到url
var arr = site_url.split("/");
var fun = arr[6];
fun = fun.split(".");
var tmpmenu = '';
tmpmenu = arr[5]+'_'+fun[0];
var temp = "#"+ tmpmenu;
$parent = $(temp).parent();
$children = $(temp).children();
$children.css({'background': '#5B6E84','color': '#FFF'});
$parent.slideToggle();
$parent.parent().toggleClass('open');
});
$(function() {
var Accordion = function(el, multiple,link) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
前端开发根据url进行页面跳转控制以及实现菜单栏手风琴效果的更多相关文章
- ThinkPHP5.0框架开发实现简单的页面跳转
ThinkPHP5.0框架开发实现简单的页面跳转 一.效果 登录界面 登录成功界面 登录失败界面 二.目录结构 三.代码 控制器中的Login.php <?php // 声明命名空间 names ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- ios&h5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
- 用js 获取url 参数 页面跳转 ? 后的参数
记得之前在原来的公司写过这个东西,但是还是忘记怎么接住参数了,只知道怎么把id传过去! 问了身边的大佬 他首先推荐了我一个链接是别人写好的方法 附上链接地址:http://blog.csdn.net/ ...
- 微信小程序开发(四)页面跳转
承接上篇博客. 通过点击按钮跳转到新的页面. 先创建新页面home: 代码如下: // home.js Page({}) // 注册页面 // home.json {} // home.wxml &l ...
- Q:简单实现URL只能页面跳转,禁止直接访问
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...
- Android应用开发基础之六:页面跳转和数据传递
创建第二个Activity 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> <action ...
- web前端开发,如何提高页面性能优化?
内容方面: 1.减少 HTTP 请求 (Make Fewer HTTP Requests) 2.减少 DOM 元素数量 (Reduce the Number of DOM Elements) 3.使得 ...
- 通过tile和url判断页面跳转是否正确
通过webdriver中的.title和.current_url获取title和url from time import sleep from selenium import webdriver br ...
随机推荐
- [转]delete 多表删除的使用
1.从数据表t1中把那些id值在数据表t2里有匹配的记录全删除掉 DELETE t1 FROM t1,t2 WHERE t1.id=t2.id 或 DELETE FROM t1 USING t1,t ...
- 给linux 授权一个可以远程登录的账户
创建用户:grant all on *.* to '; 授权:flush privileges;
- Python 定位字符串
一位朋友在玩闯关游戏时遇到如下问题: 感觉考查的就是字符串操作,用string模块就可完成:代码如下: # -*- coding: utf-8 -*- __author__ = 'Evilxr' im ...
- canvas 动态画线
<!--实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,用到的事件有mousedown mousemove mouseup用的的canvas api 有 beginPath moveTo l ...
- Ret2Libc 练习(1) -- ZwSetInformationProcess
花了两个小半晚上的时间将0day安全这本书的绕过DEP的第一个实验做了,这里做些笔记. Ret2libc 我现在自己的理解就是在开启DEP保护的情况下,在程序的其他的可执行位置找到可以满足我利用要求的 ...
- 关于AJAX中status中12030与12031的错误
最近使用ajax调用一般处理程序时,出现外网调用不成功,内网调用成功,错误码为12030或12301的情况.当时在网上搜索了一些资料,有的说是因为文件中取了个中文名称导致的,有的是说要配置什么IIS之 ...
- C# 导入Excel到DataSet中
class Import { /// <summary> /// 导入Excel到DataSet中 /// </summary> /// <param name=&quo ...
- KNN近邻算法
K近邻(KNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代表.kNN算法的核 ...
- Verilog HDL那些事_建模篇笔记(实验三:按键消抖)
实验三:按键消抖 首先将按键消抖功能分成了两个模块,电平检查模块和10ms延迟模块.电平检测模块用来检测按键信号的变化(是否被按下),10ms延迟模块用来稳定电平检查模块的输入,进而稳定按键信号,防止 ...
- C++中vector的用法
C++内置的数组支持容器的机制,但是它不支持容器抽象的语义.要解决此问题我们自己实现这样的类.在标准C++中,用容器向量(vector)实现.容器向量也是一个类模板.标准库vector类型使用需要的头 ...