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

  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    2.5K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    3.4K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    11.5K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    1.9K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    7.7K0
  • 超酷的HTML5 3D图片旋转动画特效

    中国网页设计分享的一款HTML5 3D图片动画特效,使用js动画框架TweenMax 技术实现。 这款HTML5 3D动画非常酷,当在图片上面拖动鼠标时,图片会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。 效果演示      源码下载

    2018年9月28日
    3.4K0

发表回复

登录后才能评论