js 网站顶部导航栏
(function(){
var map = {
'index' : 0,
'gift_code' : 1,
'base_info' : 1,
'band_phone': 1,
'unlink_phone': 1,
}
function isSelect(idx){
var pathname = location.pathname;
pathname = pathname.split('/')[2];
return map[pathname] != idx ? ' <li>' : ' <li class="selected">'
}
document.write('<div class="menus">');
document.write(' <ul class="menu_ul">');
document.write(isSelect(0));
document.write(' <a href="/xycenter/index/" class="su_nav">首页</a>');
document.write(' </li>');
document.write(' <li>');
document.write(' <a href="/safecenter/index/" class="su_nav has_sub" target="_blank">安全中心<i></i></a>');
document.write(' <div class="sub_menu">');
document.write(' <a href="/safecenter/lock_index/" class="sub_nav">安全锁定</a>');
document.write(' <a href="/safecenter/change_pwd_by_phone/" class="sub_nav">密码管理</a>');
document.write(' <a href="/safecenter/safe_fdmj/" class="sub_nav">防盗秘籍</a>');
document.write(' </div>');
document.write(' </li>');
document.write(' <li>');
document.write(' <a href="/callcenter/index/" class="su_nav has_sub" target="_blank">客服中心<i></i></a>');
document.write(' <div class="sub_menu">');
document.write(' <a href="/callcenter/self_help/" class="sub_nav" target="_self">自助服务</a>');
document.write(' <a href="/callcenter/helps/" class="sub_nav">帮助</a>');
document.write(' </div>');
document.write(' </li>');
document.write(isSelect(1));
document.write(' <a href="/usercenter/gift_code/" class="su_nav">我的帐户</a>');
document.write(' </li>');
document.write(' </ul>');
document.write('</div>');
document.write('<a href="javascript:;" class="su_logo">');
document.write(' <img style="width:250px;"src="abc.png" />');
document.write('</a>');
})();
另一种方式:
(function(){
document.write('<div class="links" id="uc_links">');
document.write(' <div class="link">');
document.write(' <a href=""><i></i><span>基本资料</span></a>');
document.write(' </div>');
document.write(' <div class="link">');
document.write(' <a href=""><i></i><span>礼包码</span></a>');
document.write(' </div>');
document.write(' <div class="link">');
document.write(' <a href=""><i></i><span>手机绑定</span></a>');
document.write(' </div>');
document.write(' <div class="link">');
document.write(' <a href=""><i></i><span>手机解绑</span></a>');
document.write(' </div>');
document.write('</div>');
var pathname = location.pathname;
pathname = pathname.split('/')[2];
var linksCon = document.getElementById('uc_links');
var links = linksCon.getElementsByTagName('a') , len = links.length;
if(pathname){
var sub;
for(var i=0;i<len;i++){
if(links[i].getAttribute('href').indexOf(pathname) != -1){
links[i].parentNode.className = 'link select_page';
}
}
}else{
links[0].parentNode.className = 'link select_page';
}
})();
js 网站顶部导航栏的更多相关文章
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
- android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏
概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
- [置顶]
xamarin Tablayout+Viewpager+Fragment顶部导航栏
最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...
- 使用PagerSlidingTabStrip实现顶部导航栏
使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下: PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...
- uni-app 去除顶部导航栏
自学uni-app第一天,因为有一点点的小程序和vue的基础所以感觉对uni-app有一点点的亲切感,从今天呢开始着手从登录页学习uni-app,记录一些用到的知识点,欢迎大家一起学习. 启动页隐藏顶 ...
- Vant 顶部导航栏【van-tabs】Bug
Vant 顶部导航栏[van-tabs]Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap" v-show=&q ...
- uni-app动态修改顶部导航栏标题
动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...
随机推荐
- [问题2014S11] 复旦高等代数II(13级)每周一题(第十一教学周)
[问题2014S11] 设 \(A,B\) 为 \(n\) 阶实对称阵, \(p(A),p(B),p(A+B)\) 分别为 \(A,B,A+B\) 的正惯性指数, 证明: \[p(A)+p(B)\g ...
- 对css中clear元素的理解
clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选 ...
- SQL Server 查询表的记录数(3种方法,推荐第一种)
http://blog.csdn.net/smahorse/article/details/8156483 --SQL Server 查询表的记录数 --one: 使用系统表. SELECT obje ...
- CentOS6.5 安装 tomcat
1.首先下载tomcat.tar.gz包 http://tomcat.apache.org/download-70.cgi 2.移动到目标文件夹 mv tomcat.tar.gz /usr/tomca ...
- Ubuntu安装Vim编辑器
1 安装Vim编辑器 由于Ubuntu预安装的是tiny版本,就会导致我们在使用上的产生不便. 所以我们要安装vim的full版本. 1.1 卸载旧版vi sudo apt-get remove vi ...
- 基于注解的Spring AOP的配置和使用--转载
AOP是OOP的延续,是Aspect Oriented Programming的缩写,意思是面向切面编程.可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...
- Makefile-入门与进阶【转】
from:here 一.入门 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...
- TestLink
TestLink的主要功能包括: 测试需求管理 测试用例管理 测试用例对测试需求的覆盖管理 测试计划的制定 测试用例的执行 大量测试数据的度量和统计功能 TestLink的主要特色包括: 支持多产品或 ...
- java的concurrent用法详解
我们都知道,在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,当然也有一些开源的框架提供了这些功能,但是这些依然没有JDK自带的功能使用起来方便.而当针对高质量Java ...
- javascript内置属性——arguments
arguments是javascript中的内置属性,可以直接调用函数的参数,作用类似Array,但本身并不是数组.这次发现它是为了实现封装函数,将不确定数量的数字乘积.比如function mult ...