search

Home  >  Article  >  Web Front-end  >  Implementing navigation menu highlighting based on jquery (two methods)_javascript skills

Implementing navigation menu highlighting based on jquery (two methods)_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:43:361631browse

Project requirements:

Implementation principle: When the current element is selected, add a style to the current element, and remove the style from the same level element.

Click on different navigation menus to highlight the currently clicked menu. Click on a category under the navigation, and the navigation to which the category belongs must also be highlighted. Click on an article, and the navigation menu to which the article belongs must also be highlighted. It’s highlighted.

The rendering is as follows:

Sample code one:

The specific sample code is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我爱学习</title>
<style>
body,ul,ol,li,div,p{margin:0px;padding:0px;}
ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;}
ul li{float:left;heihgt:45px;line-height:45px;width:100px;text-align:center;}
ul li a:link,a:visited{color:#fff;text-decoration:none;}
.act{background:#ff6600;}
</style>
<script src="../jquery.js"></script>
<script>
$(function(){
$('ul li').eq(0).addClass("act");
 $('ul li').each(function(){
  $(this).click(function(){
    $(this).addClass("act").siblings().removeClass("act");
   })
 })
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.52aixuexi.com/">首页</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/suibi/">随笔</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/sucai/">素材</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/biancheng/">编程</a></li>
</ul>
</body>
</html>

Sample code two:

Add a rel attribute to the link at the menu level and save the href attribute: 

<div id="menu" class="main-nav">
      <dl>
       <dt><a href="/C000001916" class="current">首页<span class="mnl"></span></a></dt>
      </dl>
      <dl>
        <dt><a href="/C000001919&#63;lmbm=1" <span style="color: #ff0000;">rel="/C000001919&#63;lmbm=1"</span>>新闻中心<span class="mnl"></span></a></dt>
        <dd class="sn-c">
          <a href="#">产品理念2</a>
          <em>|</em>
          <a href="#">发展历程</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
      <dl>
        <dt><a href="/C000001919&#63;lmbm=2" <span style="color: #ff0000;">rel="/C000001919&#63;lmbm=2"</span>>产品介绍<span class="mnl"></span></a></dt>
        <dd class="sn-c sn3">
          <a href="#">产品理念</a>
          <em>|</em>
          <a href="#">发展历程3</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
    </div>

Then compare the URL and rel in the browser address bar. If they are equal, add class to the current 3499910bf9dac5ae3c52d5ede7383485 tag, and remove the class of other 3499910bf9dac5ae3c52d5ede7383485 tags.2d0dde566e229391474f8e4890958dc3

 var urlstr = location.href;　　　　//获取浏览器的url
 var urlstatus=false;　　　　　　　　//标记
　//遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

This can also basically achieve the effect, but if there is a category under the navigation, as shown in the figure. In this way, the category url and the navigation url cannot match, and then the news url and the navigation url cannot match. So it is still a bit nonsense .....What should we do?

So this is my idea

Since the URLs are different, then look for the relationship between navigation-->category-->news. Their corresponding relationship is that there may be multiple categories under one navigation, and there may be multiple news articles under one category. .So in reverse terms, each news or category corresponds to a navigation. Then define a variable on the corresponding category page and news page, which is the navigation identifier. Then modify the 3499910bf9dac5ae3c52d5ede7383485 tag of the navigation dc6dce4a544fdca2df29d5ac0ea9906b rel attribute. Compare this attribute with the variable. If they are the same, change the current class.

The above content is to introduce you to the navigation menu highlighting based on jquery in two ways. I hope it will be helpful to you.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript common security vulnerabilities and automated detection technology_javascript skillsNext article：JavaScript common security vulnerabilities and automated detection technology_javascript skills

Related articles

See more