导航特效: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+JS制作纵向点击展开的二级导航菜单

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

    2018年9月19日
    3.8K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    5.0K0
  • label文字与textarea、input垂直居中、顶部对齐的方法

    在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观,如下图。 姓名: 留言: 中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法 在input标签样式中加入css标签vertical-align: middle…

    2018年3月18日
    10.5K0
  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    2.8K0
  • 怎么让一长串英文字符自动换行?

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

    2019年11月20日
    2.9K0
  • 如何单独设置打印网页的样式

    做项目,有些网页需要打印,很多时候,是导出WORD或EXCEL再打印。 现在需要页面直接打印,方便没有安装OFFICE的用户。 需求:页面在浏览器中浏览是一种样式,要打印这个页面,是另一种样式。 解决方法:用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    2019年2月15日
    1.9K0

发表回复

登录后才能评论