在导航菜单点击链接跳转到新页面后,添加blue

qq_36012948 2016-10-22 03:59:47
...全文
722 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
点击事件跳转页面的时候加上特定参数,例:pages/projectList?footer_index=0 footer_index是所点击div .item的下标 在<div class="footer">那个原始页面加上js

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}
$(function(){
	var footer_index=getUrlParam('footer_index');
	if(footer_index!=null&&footer_index!=""){
		$(".footer .item").eq(footer_index).find(".text").addClass("blue");
	}
});
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 4 楼 jslang 的回复:
是不是要根据当前页面的地址设置样式。楼主不说清楚我们只能玩看图猜谜了

$(function(){
	if (/(pages\/\w+)/.test(location.href)) {
		$(".footer .item[data-href='"+RegExp.$1+"'] .text").addClass("blue");
	}
});
比如我点项目 项目变蓝色 点击投资人投资人变蓝色 其他的取消blue样式。当时从项目到投资人,会跳转页面导致刷新 然后我的blue样式没有应用到投资人上
Go 旅城通票 2016-10-24
  • 打赏
  • 举报
回复
引用 14 楼 qq_36012948 的回复:
[quote=引用 5 楼 showbo 的回复:] 网站导航栏目焦点设置
试了,然后就不能跳转了 还是没有效果 比如我点项目 项目变蓝色 点击投资人投资人变蓝色 其他的取消blue样式。当时从项目到投资人,会跳转页面导致刷新 然后我的blue样式没有应用到投资人上[/quote] 看示例,大概意思就是要你在跳转到的页面获取相关的参数,重新设置焦点。你在当前页面上执行js设置焦点样式没用,应为刷新了会丢失样式,除非你是无刷新的,或者内容在iframe中代开,而不是整个页面刷新
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 12 楼 u011376884 的回复:
你这是点击后跳页面了 用cookie(不知道h5的app能不能用)或者request带特定参数来控制blue添加在哪里
...比如我点项目 项目变蓝色 点击投资人投资人变蓝色 其他的取消blue样式。当时从项目到投资人,会跳转页面导致刷新 然后我的blue样式没有应用到投资人上
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 5 楼 showbo 的回复:
网站导航栏目焦点设置
试了,然后就不能跳转了 还是没有效果 比如我点项目 项目变蓝色 点击投资人投资人变蓝色 其他的取消blue样式。当时从项目到投资人,会跳转页面导致刷新 然后我的blue样式没有应用到投资人上
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
比如我点项目 项目变蓝色 点击投资人投资人变蓝色 其他的取消blue样式。当时从项目到投资人,会跳转页面导致刷新 然后我的blue样式没有应用到投资人上
  • 打赏
  • 举报
回复
你这是点击后跳页面了 用cookie(不知道h5的app能不能用)或者request带特定参数来控制blue添加在哪里
当作看不见 2016-10-24
  • 打赏
  • 举报
回复
你这个可以使用ajax局部刷新,或者iframe,不然的话就要传输数据,比较麻烦。 建议使用ajax
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 8 楼 qq_36012948 的回复:
[quote=引用 2 楼 qq_29594393 的回复:]

//只有最后一个点击生效
$(".item").click(function(){
	$(this).siblings('.item').children('.text').removeClass('blue')
	$(this).children('.text').addClass('blue')
})
//所有被点击的都会生效
$(".item").click(function(){
	$(this).children('.text').addClass('blue')
})
点击后跳页面当前对象的那个还是不变颜色[/quote] 这个他会跳页面刷新 导致我的blue样式没有应用到当前点击的那个图标上。怎么办
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 4 楼 jslang 的回复:
是不是要根据当前页面的地址设置样式。楼主不说清楚我们只能玩看图猜谜了

$(function(){
	if (/(pages\/\w+)/.test(location.href)) {
		$(".footer .item[data-href='"+RegExp.$1+"'] .text").addClass("blue");
	}
});
就是像淘宝那个APP一样点击下面的底部 跳转到其他地方并且对应的 换颜色
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 2 楼 qq_29594393 的回复:

//只有最后一个点击生效
$(".item").click(function(){
	$(this).siblings('.item').children('.text').removeClass('blue')
	$(this).children('.text').addClass('blue')
})
//所有被点击的都会生效
$(".item").click(function(){
	$(this).children('.text').addClass('blue')
})
点击后跳页面当前对象的那个还是不变颜色
当作看不见 2016-10-24
  • 打赏
  • 举报
回复
引用 6 楼 qq_36012948 的回复:
[quote=引用 1 楼 qq_29594393 的回复:] 你的意思是点击后颜色发生变化,表示被点击? 是所有被点击的变蓝色,还是最后一个被点击的变蓝色?
是啊 APP不是都有个共用的头部或底部, 那个是跳页面的 点击要换颜色[/quote] 上面已经给出jquery代码实现。有什么疑问补充?
qq_36012948 2016-10-24
  • 打赏
  • 举报
回复
引用 1 楼 qq_29594393 的回复:
你的意思是点击后颜色发生变化,表示被点击? 是所有被点击的变蓝色,还是最后一个被点击的变蓝色?
是啊 APP不是都有个共用的头部或底部, 那个是跳页面的 点击要换颜色
Go 旅城通票 2016-10-22
  • 打赏
  • 举报
回复
天际的海浪 2016-10-22
  • 打赏
  • 举报
回复
是不是要根据当前页面的地址设置样式。楼主不说清楚我们只能玩看图猜谜了

$(function(){
	if (/(pages\/\w+)/.test(location.href)) {
		$(".footer .item[data-href='"+RegExp.$1+"'] .text").addClass("blue");
	}
});
天际的海浪 2016-10-22
  • 打赏
  • 举报
回复

$(function(){
	if (/(pares\/\w+)/.test(location.href)) {
		$(".footer .item[data-href='"+RegExp.$1+"'] .text").addClass("blue");
	}
});
当作看不见 2016-10-22
  • 打赏
  • 举报
回复

//只有最后一个点击生效
$(".item").click(function(){
	$(this).siblings('.item').children('.text').removeClass('blue')
	$(this).children('.text').addClass('blue')
})
//所有被点击的都会生效
$(".item").click(function(){
	$(this).children('.text').addClass('blue')
})
当作看不见 2016-10-22
  • 打赏
  • 举报
回复
你的意思是点击后颜色发生变化,表示被点击? 是所有被点击的变蓝色,还是最后一个被点击的变蓝色?
4 浏览器网络编程(共两周) 4.1 浏览器工作原理(老师讲解1学时,学生理解1学时) 浏览器工作原理如图4-1所示。 图4-1 浏览器工作原理 (1) 浏览器分析超链指向页面的 URL。 (2) 浏览器向 DNS 请求解析 www.tsinghua.edu.cn 的 IP 地址。 (3) 域名系统 DNS 解析出清华大学服务器的 IP 地址。 (4) 浏览器与服务器建立 TCP 连接 (5) 浏览器发出取文件命令: GET /chn/yxsz/index.htm。 (6) 服务器 给出响应,把文件 index.htm 发给浏览器。 (7) TCP 连接释放。 (8) 浏览器显示“清华大学院系设置”文件 index.htm 中的所有文本 4.2 浏览器功能结构(老师讲解1学时,学生理解1学时) 浏览器程序功能结构如图4-2所示。 图4-2 浏览器功能结构 1) 浏览器有一组客户、一组解释程序,以及管理这些客户和解释程序的控制程序。 2) 控制程序是其中的核心部件,它解释鼠标的点击和键盘的输入,并调用有关的组件来执行用户指定的操作。 3) 例如,当用户用鼠标点击一个超链的起点时,控制程序就调用一个客户从所需文档所在的远地服务器上取回该文档,并调用解释程序向用户显示该文档 4) HTML 解释程序是必不可少的,而其他的解释程序则是可选的。 5) 解释程序把 HTML 规格转换为适合用户显示硬件的命令来处理版面的细节。 6) 许多浏览器还包含 FTP 客户,用来获取文件传送服务。 7) 一些浏览器也包含电子邮件客户,使浏览器能够发送和接收电子邮件 8) 浏览器将它取回的每一个页面副本都放入本地磁盘的缓存中。 9) 当用户用鼠标点击某个选项时,浏览器首先检查磁盘的缓存。若缓存中保存了该项,浏览器就直接从缓存中得到该项副本而不必从网络获取,这样就明显地改善浏览器的运行特性。 10) 但缓存要占用磁盘大量的空间,而浏览器性能的改善只有在用户再次查看缓存中的页面时才有帮助。 11) 许多浏览器允许用户调整缓存策略。 4.3 浏览器设计(老师讲解2学时,学生设计2学时) (1)浏览器功能设计 浏览器功能设计主要确定设计好的浏览器需要具备哪些功能,以及这些功能是以什么方式进行实现,这个步骤相当于软件设计中的“需求分析”,其中必须保证基本功能的具备,即浏览器必须能够浏览Web页面。 (2)浏览器界面设计 浏览器界面设计主要确定浏览器的页面布局,设定浏览器窗口上设置哪些功能菜单项、设置哪些功能按钮、设置哪些状态栏,它们各自的位置如何、属性如何、对应的变量如何等等。 (3)浏览器代码设计 浏览器代码设计主要是确定对上述的设计的功能在代码上怎样实现,包括选用的程序语言和编程平台选择、程序代码的编写、程序代码的调试、程序功能的测试等等。 4.4 浏览器编程设计平台(老师讲解2学时,学生理解4学时) (1)VS2005编程平台 (2)WebBrowser类及其使用 (3)一些浏览器程序的代码分析 4.5 浏览器开发步骤(8天) (1)熟悉VS2005平台,建立项目(半天) 打开VS2005选择“创建项目”,进入“新建项目”对话框,如图4-1所示。 图4-1 “新建项目”对话框 在“新建项目”对话框的项目类型窗口中选中“Visual C#”作为项目开发语言,在模板窗口中选中“Windows 应用程序”作为项目开发模板,在“名称”、“位置”编辑框中输入自己设定的项目名字和项目存储位置,本讲义使用“CSharp浏览器”作为项目名称,如图4-2所示。 图4-2 输入新建项目的属性 完成输入内容后,单击“确定”按钮,进入项目VC#开发窗口“Form.cs[设计]”,如图4-3所示。 图4-3 VC#开发窗口“Form.cs[设计]” (2)界面设计(1天) ○1设计菜单栏如图4-4所示。(半天) 图4-4 设计菜单栏 设计“文件”菜单如4-5所示。 图4-5 设计“文件”菜单 设计“编辑”菜单如图4-6所示。 图4-6 设计“编辑”菜单 设计“查看”菜单如图4-7所示。 图4-7 设计“查看”菜单 设计“收藏”菜单如图4-8所示。 图4-8 设计“收藏”菜单 设计“工具”菜单如图4-9所示。 图4-9 设计“工具”菜单 ○2设计工具栏、用户区和状态栏如图4-10所示(半天) 图4-10 工具栏和状态栏 (3)功能代码编辑 ○1初始化代码(半天) 双击“Form”设计页面进入代码编写页面,如图4-11所示。 图4-11 代码编写页面 初始化页面代码如下: ////////////////////////////////////////////////////////

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧