导航特效: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%的人还看了以下文章

  • jQuery带标题的图标图片轮播特效(免费)

    在<head></head>之间引入 <link rel=”stylesheet” type=”text/css” href=”css/font-awesome.css”> <link rel=”stylesheet” href=”css/style.css”> 在<body></body&g…

    2018年9月12日
    4.6K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    3.0K0
  • CSS的浮动及清除浮动的5种方法

    css属性float:left/right/none 左浮动/右浮动/不浮动(默认),文章介绍了清除浮动的5种方法,并指出其实现原理、优缺点和使用建议。

    2019年11月5日
    3.8K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    3.9K0
  • 如何去除导航栏最后一个不需要的分隔线

    网页导航栏制作时,菜单项之间常用1像素细线做分隔,如上图。 给菜单栏菜单项添加分隔线代码如下: /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了,如何处理呢? 去除最后一个菜单项右边的分隔线,代码 /* 移除分隔线 */ .nav li:last-…

    2018年7月26日
    5.6K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    4.5K0

发表回复

登录后才能评论