(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 网站顶部导航栏的更多相关文章

  1. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  2. android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  3. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  4. 使用PagerSlidingTabStrip实现顶部导航栏

    使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下:          PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...

  5. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  6. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  7. uni-app 去除顶部导航栏

    自学uni-app第一天,因为有一点点的小程序和vue的基础所以感觉对uni-app有一点点的亲切感,从今天呢开始着手从登录页学习uni-app,记录一些用到的知识点,欢迎大家一起学习. 启动页隐藏顶 ...

  8. Vant 顶部导航栏【van-tabs】Bug

    Vant 顶部导航栏[van-tabs]Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap" v-show=&q ...

  9. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

随机推荐

  1. 使用IOS7原生API进行二维码条形码的扫描

    使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...

  2. btrfs使用方法

    创建文件系统 mkfs.btrfs 命令建立一个 btrfs 格式的文件系统.可以用如下命令在设备 sda5 上建立一个 btrfs 文件系统,并将其挂载到 /btrfsdisk 目录下: #mkfs ...

  3. iOS 推送

    1,推送已至,点通知栏: a)若App在UIApplicationStateActive(活动)状态,调用 //接收到推送消息 - (void)application:(UIApplication * ...

  4. IOS开发之异步加载网络图片并缓存本地实现瀑布流(二)

    /* * @brief 图片加载通用函数 * @parma imageName 图片名 */ - (void)imageStartLoading:(NSString *)imageName{ NSUR ...

  5. mysql多表查询例子

    [理解方式]先分别找出每个表中查询出来的结果,然后再将两个结果合并. create database test charset utf8 collate utf8_bin;use test;creat ...

  6. jquery之empty()方法详解

    empty()函数用于清空每个匹配元素内的所有内容. empty()函数将会移除每个匹配元素的所有子节点(包括文本节点.注释节点等所有类型的节点). 该函数属于jQuery对象(实例). 语法 jQu ...

  7. PHP-----循环结构

    for循环语句 打印金字塔 完整的金字塔 //打印金字塔 $n=25; for($i=1;$i<=$n;$i++){ //空格循环 for($k=1;$k<=$n-$i;$k++){ ec ...

  8. grunt压缩合并代码

    module.exports = function(grunt) { // 配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json' ...

  9. jquery validate 在ajax提交表单下的验证方法

    $(function() {  var method='${method }';  if(method == 'edit'){   url="${ctx}/commodity/typeReN ...

  10. laravel 表单验证 正则匹配

    判断url地址 是否为正确格式 控制器中 $this -> validate($request,[ 'linkname' => 'required|max:6|min:2', 'url' ...