学做网站培训课程介绍

当前位置:

JS实现网站导航菜单点击当前样式高亮显示

做网站过程中,网站导航菜单里会有很多的导航栏目,在企业网站建设过程中,为了让用户知道自己所处的栏目,我们会将网站导航菜单点击后,所点击的当前样式有变化,呈现高亮显示。如下图:

网站导航菜单点击当前样式高亮显示

如何实现这种网站导航菜单点击当前样式高亮显示的效果呢?这需要使用JS特效代码才能实现。下面以一个案例的方法给学习建网站的学员们介绍一下实现方法。

HTML代码写法:


<ul id="meau_nav">
    <li><a href="a.html" class="active"></a></li>
    <li><a href="b.html"></a></li>
    <li><a href="c.html"></a></li>
    <li><a href="d.html"></a></li>
</ul>

JS代码写法:


<script>
//获取div下面所有的a标签(返回节点对象)
   var myNav = document.getElementById("meau_nav").getElementsByTagName("a");
   //获取当前窗口的url
   var myURL = document.location.href;
   //循环div下面所有的链接,
   for(var i=1;i<myNav.length;i++){
   //获取每一个a标签的herf属性
  var links = myNav[i].getAttribute("href");
  var myURL = document.location.href;
  //查看div下的链接是否包含当前窗口,如果存在,则给其添加样式
  if(myURL.indexOf(links) != -1){
    myNav[i].className="active";
    myNav[0].className="";
   }
 }
</script>

CSS代码写法:(控制点击后的样式)


.active{color:red;font-weight:600;}

原理介绍

通过JS来循环判断当前页面的URL与导航栏目中哪个URL地址相同,如果相同就给标签的超链接标签添加一个.active的类名,然后再通过CSS控制.active的样式。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • Dreamweaver跳转菜单制作 视频教程 (1123732 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 在企业网站制作时,需要在网站的边栏列出企业产品分类,如果公司网站产品项目很多的情况,就需要设置二级分类或者子分类。如下图:如何在自己
  • 在使用wordpress建网站时,往往需要在侧边栏调用当前栏目的子分类子目录,而且在点击子目录时,还会侧边栏显示这些子目录的分类。在wp程序下,
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • page页面可以单独使用不同页面模板,这个我们都知道了,那怎么给不同的single文章页面设计不同模板呢?我们有二种方法: 第一种:通过代码来判断
  • 插件介绍wordpress代码高亮插件WP-CodeBox提供干净的语法高亮和Ajax技术先进或职位的源代码在页面嵌入特征。它支持流行的语言突出显示行数,代
  • 对于像学做网站论坛这样一个以网站技术交流的网站来说,时常会在网页中书写一些HTML代码,这样用户浏览到这些内容的时候就会意识到这些内容是分享的代
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 很多同学在模板制作的过程,都有图片调用不出来的现象,其实原因很简单,就是图片路径错误造成的。这里涉及到html和css中的一些路径知识,这个视