ylg娱乐官网js达成当前导航菜单高亮突显

高亮显示导航栏代码,通用方式,包括所在内容页看了下论坛,大家基本使用的是灵动标签来实现当前栏高亮,我这个方法是根据js来实现的。如果需要你就试下吧方法如下,大家可以举一反三,其实是很简单的修改:div
class=header ul class=menu mct id=navi lia href=/首页/a/li lia
href=/wangluodongtai/网络动态/a/li lia href=/youhuajiqiao/优化技巧/a/li
lia href=/huozaidangxia/活在当下/a/li lia
href=/woaibiancheng/我爱编程/a/li lia href=/xiaojiqiao/小技巧/a/li lia
href=/hulianwangwen/互联网文/a/li /ul/divscript type=text/javascript
language=javascriptvar nav = document.getElementById(navi);var links =
nav.getElementsByTagName(li);var lilen = nav.getElementsByTagName(a);
//判断地址var currenturl = document.location.href;var last = 0;for (var
i=0;ilinks.length;i++){ var linkurl = lilen[i].getAttribute(href);
if(currenturl.indexOf(linkurl)!=-1) { last = i; }}
links[last].className = menufirst; //高亮代码样式/script说明: ul
class=menu mct id=navi 中的ID值要和 var nav =
document.getElementById(navi); 中的想同,即在js中获取id=navi
值,这个值要唯一,不能跟其它CSS或JS代码中ID同名,或者自己改成别的名字。
links[last].className = menufirst; 这一句中的 menufirst
为你的高亮样式。————————————————————————-例如:div
id=main-navdiv class=wrap cf ul id=navi3 class=menuli a
href=!–news.url–]首页/a/li[e:loop={select classname,classpath from
[!db.pre!]enewsclass where bclassid=58 order by classid ,0,24,0}]lia
href=?=$public_r[newsurl]??=$bqr[classpath]??=$bqr[classname]?/a/li[/e:loop]
/ul/divscript type=text/javascript language=javascriptvar nav =
document.getElementById(navi3);var links =
nav.getElementsByTagName(li);var lilen = nav.getElementsByTagName(a);
//判断地址var currenturl = document.location.href;var last = 0;for (var
i=0;ilinks.length;i++){ var linkurl = lilen[i].getAttribute(href);
if(currenturl.indexOf(linkurl)!=-1) { last = i; }}
links[last].className = current-menu-item; //高亮代码样式/script

**为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两个种方法都比较简单,相对而言js更简单些,下面介绍用js来实现的方法:

js实现当前导航菜单高亮显示

一、现在我们在网站设计(三)的基础上,来编写about.html页面。

首页假设我们的导航代码是这样写的:

HTML:
<div id=”navi”>
<ul>
    <li><a href=””>主页1</a><li>
    <li><a href=””>主页2</a><li>
    <li><a href=””>主页3</a><li>
    <li><a href=””>主页4</a><li>
</ul>
</div>

 

<div id=”navi”>
<ul>
<li><a href=”1.html”>主页</a></li>
<li><a href=”2.html”>栏目1</a></li>
</ul>
</div>

js代码:
<script type=”text/javascript” language=”javascript”>
var nav = document.getElementById(“navi”);
var links = nav.getElementsByTagName(“li”);
var lilen = nav.getElementsByTagName(“a”);
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
   var linkurl =  lilen.getAttribute(“href”);
     if(currenturl.indexOf(linkurl)!=-1)
        {
         last = i;
        }
}
         links[last].className = “current”;
</script>

这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV

下面是js代码:
<script type=”text/javascript” language=”javascript”>
var nav = document.getElementById(“navi”);
var links = nav.getElementsByTagName(“li”);
var lilen = nav.getElementsByTagName(“a”);
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
   var linkurl =  lilen[i].getAttribute(“href”);
     if(currenturl.indexOf(linkurl)!=-1)
        {
         last = i;
        }
}
         links[last].className = “hl”;
</script>

1.js代码必须加到body里,即加到导航的下面,不能加到head里,否则出错不能使用。

 

复制这段js代码加到body里。注意:
1.getElementById(“navi”);这一句括号里的navi必须与<div
id=”navi”>里的navi一致。
2.js代码必须加到body里,即加到导航的下面,不能加到head里,否则出错不能使用。
3.links[last].className = “hl”;中的hl是高亮代码的样式类名。
最后再写一下高亮的css代码就可以了,如下:
#navi ul li.hl a{
color:#123456;
}
这样就实现当前导航菜单高亮显示了。**

2.也可直接写到JS文件中导入HTML中。

about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果。

 

 

 

1、背景:

 

我们在about.html页面中写了一个ul列表,然后接着是一段对每个列表的标题进行详细说明的一段文字。文章太长时,使得页面看起来很长,不大美观,所以我们现在做的就是:通过鼠标点击,点击到哪个列表项,就显示出那段文字即可,把不想看的那段文字隐藏。

 

2、思路

 

首先把显示出来的存放每个列表项那段文字的div都隐藏掉,然后通过鼠标点击,获取到的href属性值,最后判断要显示出哪个div来。

 

3、代码

 

(1)about.js 用来写这个页面用到的JS代码

 

复制代码

/******************显示section块的函数*****************/

function showSection(id){

    //获取元素

    var divs = document.getElementsByTagName(“div”);

发表评论

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