为了账号安全,请及时绑定邮箱和手机立即绑定

前端菜单效果

/ 猿问

前端菜单效果

workerworking 2017-07-08 10:21:41


像这种,两个页面,当前页面的tab标签加入下划线样式,这个怎么做?难道写js,判断地址栏是 login还是 register?

http://img.mukewang.com/596041430001ff4b03430411.jpghttp://img.mukewang.com/5960414400013d6a03340396.jpg

这里的关键是:出现了页面跳转。是两个页面 公用一个导航栏,不是单页面的选项卡。



查看完整描述

9 回答

已采纳
?
如果不能解决你的问题丶我会惭愧

这是layui的社区模块吧?

layui是把这个当成两个页面在写,当然你也可以当成一个页面来写完全没问题。

1+4=5;2+3也可以等于5;

至于下划线的样式也可以用js来写,

但是建议用css就行,

css的hover伪类就可以做到。

前端写代码有一个原则:能用css解决的尽量使用css,而不使用js。

查看完整回答
1 反对 回复 2017-07-14
  • workerworking
    workerworking
    一个页面的我会写啊 很简单。我就是不知道两个页面,甚至更多页面 公用一个导航菜单的时候,怎么写.
?
夜舞暗澜

你两个页面是一个模板?那你可以增加一个currentPage字段,按这个字段给tab加class。

不是的话分开写不就好了。

查看完整回答
反对 回复 2017-07-10
?
zhujun2310

亲,我觉得跟你是哪个页面没有关系,鼠标点击是DOM操作,绑定的是登录和注册这两个选项,可以完全动态的增删样子。用js给这两个选项绑定点击事件,function里写上要添加的样式就可以了。这是一个很简单的选项卡,并不明白为什么要写成两个页面

查看完整回答
反对 回复 2017-07-09
  • workerworking
    workerworking
    这么说吧,比如京东有很多菜单栏,比如家居,服饰,这就对应上面的登录注册,但进入某个菜单分类下,比如 点击 服饰,进入服饰页面,但是上面的菜单服饰,会有相应的样式,这就是多页面了,单页面的选项卡我会写。
  • zhujun2310
    zhujun2310
    亲,可以了解一下http协议,是不是多页面,你得看你的地址栏有没有变,如果你的页面地址没有变动,说明是同一个页面,只不过控制的是不同块儿之间的显示与隐藏而已,你的样式都是定义好的,或者动态增加也可以(不建议,影响DOM性能),如果你的页面地址已经更改了,说明显示的是另外一个页面,样式也是加载在页面上的。 还有,你是不是想表达二级菜单怎么写?比如,数码>手机>iPhone类似于这种的显示
  • workerworking
    workerworking
    我表达的意思可以参考这个地址:http://www.layui.com/ 菜单上有:文档 示例,当点击‘文档’跳转到文档页面,并且‘文档’下面有绿色下划线,当点击‘示例’的时候,进入‘示例’页面,并且‘示例’下面有绿色下划线。这两个菜单对应两个页面。 在同一个页面写js,实现这个效果比较容易, {循环绑定事件,去除所有菜单样式,然后给当前被点击的按钮添加下划线样式}。 但是 两个甚至更多的页面时,这个效果怎么写呢?因为出现了页面跳转。
?
苍蝇fly

我的写法是有一个hover,然后再给你一个active(点击后)的样式,样式和hover的相同,点击选项卡的时候移除所有的active样式,并且给当前点击的选项卡加上active样式。我是后端猿,仅供参考。

查看完整回答
反对 回复 2017-07-08
?
无尽未来

想要简单实现效果hover 的时候给个border 就可以了 ,不过加入你想鼠标点击切换选项卡 同时样式改变的话只能JS了 给一个class 然后点击切换增加-清除样式就可以实现了 具体的你可以在慕课搜索一下Amy老师的选项卡课程 我就是看这个学习的~ 手打望采纳

查看完整回答
反对 回复 2017-07-08
  • workerworking
    workerworking
    看了大家的回复,貌似我说的不是很清楚。添加样式我知道怎么写。 现在问题是,有一个注册页和登录页,他们是两个页面,当在注册页的时候,注册下面有样式,当前所在登录页时,登录按钮下面有样式。
  • 无尽未来
    无尽未来
    我表述的很清楚了,是你不理解选项卡切换。建议你先去度娘一下 或者去看一下慕课老师的课程 。还有我的采纳
  • workerworking
    workerworking
    选项卡很简单的,而且是单页面,不存在页面跳转的情况,我想表达的是,某个网站,共用一个导航栏,有多个栏目,比如点击‘汽车’栏目,跳转到相应的页面下,但是导航栏上‘汽车’这两个字颜色变红。因为出现了页面跳转,这是关键。
点击展开后面1
?
workerworking

看了大家的回复,貌似我说的不是很清楚。添加样式我知道怎么写。 现在问题是,有一个注册页和登录页,他们是两个页面,当在注册页的时候,注册下面有样式,当前所在登录页时,登录按钮下面有样式。

查看完整回答
反对 回复 2017-07-08
?
MR帽子先生

用css3可以直接写

tageName:onmouseover{position:block}

就可以了,没必要用JS太麻烦了,虽然说JS也是可以的。

查看完整回答
反对 回复 2017-07-08
  • workerworking
    workerworking
    样式我知道怎么写。 现在问题是,有一个注册页和登录页,他们是两个页面,当在注册页的时候,注册下面有样式,当前所在登录页时,登录按钮下面有样式。
?
书旅

就是,当你鼠标放在哪个标签上时有一个onmouseover事件触发,然后添加一个下划线的样式

查看完整回答
反对 回复 2017-07-08
  • workerworking
    workerworking
    样式我知道怎么写。 现在问题是,有一个注册页和登录页,他们是两个页面,当在注册页的时候,注册下面有样式,当前所在登录页时,登录按钮下面有样式。
?
慕粉125816

hover 也可以的把

查看完整回答
反对 回复 2017-07-08
  • workerworking
    workerworking
    样式我知道怎么写。 现在问题是,有一个注册页和登录页,他们是两个页面,当在注册页的时候,注册下面有样式,当前所在登录页时,登录按钮下面有样式。

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信