导航特效:jquery实现当前(活动)菜单样式变化

导航特效:jquery实现当前(活动)菜单样式变化

用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。

本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。

当前(活动)菜单样式变化实现原理

在html代码中给首页(默认选中)加上class名cur

<a href="demo.html?aa=1" class="cur">首页</a>

完整导航代码:

<nav id="menu">
<ul>
<li><a href="demo.html?aa=1" class="cur">首页</a></li>
<li><a href="demo.html?aa=2">网页制作</a></li>
<li><a href="demo.html?aa=3">网页设计</a></li>
<li><a href="demo.html?aa=4">HTML教程</a></li>
<li><a href="demo.html?aa=5">web前端</a></li>
<li><a href="demo.html?aa=6">网站运营</a></li>
<li><a href="demo.html?aa=7">建站入门</a></li>
<li><a href="demo.html?aa=8">联系我们</a></li>
</ul>
</nav>

在点击切换的过程中,我们需要给被选中的子选项添加类“cur”,然后让其它子选项删除类“cur”。

jquery实现当前(活动)菜单样式变化实例

本例使用jquery,需要在<head></head>之间添加jquery.min.js

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>

通过js中的location.href得到当前页面的地址,然后与导航上的链接地址匹对,如果相同则说明是当前菜单,要增加类“cur”,其他菜单删除类“cur”,代码如下:

<script type="text/javascript">
  var urlstr = location.href;
  var urlstatus=false;
  $("#menu a").each(function () {
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('cur'); 
      urlstatus = true; 
    } else {
      $(this).removeClass('cur');
    }
  });
  if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

导航菜单样式代码:

<style>
  nav { padding:0; margin:0 auto; width:808px;}
  ul,li{list-style-type:none;padding:0; margin:0; }
  nav li { background: #060; margin-right:1px; float:left; color:#fff; }
  nav li a { display:block; width:100px; text-align:center; height:50px; line-height:50px; color:#fff; font-size:16px; text-decoration:none;}
  .cur{ background: #F90; font-weight:bold;}
</style>

示例中的导航使用的是背景颜色,鼠标点击后某菜单成当前菜单后,该菜单项背景颜色会变化,成高亮显示。

你可以把背景颜色改变成很cool的导航图片哦!

tab选项卡切换也是同样道理。

在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的tab新增一个class,然后改这个class的样式,比如起一个class名叫“active”。

我们可以用JS从tab项或导航菜单中添加和删除该class类名,方法如下:

1、通过JS取到所有tab的节点

var arr = document.getElementsByClassName("tab_item");

2、在被选中的子节点加上.classList.add(“类名”),比如:

arr[i].classList.add("active");

这样就给当前子选项卡添加了“active”类样式。

3、把其他的选项卡的“active”移除,只需要在其他子节点的后面加上.classList.remove(“类名”):

arr[j].classList.remove("active");

使用js实现tab选项卡不同选项样式切换,你可以参考以上方法实现。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1166.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月8日 上午10:47
下一篇 2018年2月9日 上午10:08

99%的人还看了以下文章

  • 纯css制作简洁的绿色导航菜单

    css制作简洁的绿色导航菜单,代码非常简单,背景颜色和背景图片换下,即可满足大多数导航菜单需要。 导航菜单所需图片素材: 导航菜单HTML代码: <div id=”nav”> <ul> <li><a href=”http://www.125jz.com/”>首页</a></li> &lt…

    2018年2月26日
    2.3K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    1.9K0
  • CSS+JS制作纵向点击展开的二级导航菜单

    网页制作时,如产品分类目录、导航等,需要制作纵向二级导航菜单,点击展开分类显示子目录,再点击收缩起目录。 中国网页设计分享的二级导航菜单使用CSS+JS制作,调用简单方便,可移植、可修改。 网页HTML代码(放在body区域): <div id=”my_menu” class=”sdmenu”> <div> <span>教…

    2018年9月19日
    3.2K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    1.3K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.4K0
  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    3.1K0

发表回复

登录后才能评论