精妙绝伦的jQuery——改进导航:菜单、标签及折叠选项

  • Post author:
  • Post category:其他




一、让页面上所有的链接都在新窗口打开。

html代码:

<ul id=”links”>

<li><a href=”

http://www.yahoo.com”>Yahoo</a></li

>

<li><a href=”

http://www.google.com”>Google</a></li

>

<li><a href=”

http://www.bing.com”>Bing</a></li

>

</ul>

选取#links li元素的后代元素a,然后使用

.attr()方法

把这些链接元素的target属性设置为_blank。

$(‘#links li a’).attr(‘target’, ‘_blank’);

除此之外,还可以对页面上的这些链接做别的事情。

1、给所有的链接添加一个新的类;

2、为所有链接添加内容与链接文本一致的title属性;

3、为所有链接分别添加一个rel属性;

4、删除所有链接的href属性,从而禁用这些链接。



二、突出显示导航中的当前选中项。

方法是用jQuery脚本对菜单项URL与页面实际URL进行对比,让正确的菜单项高亮。

1、创建一个变量path,并为它赋值为location.pathname,pathname是javascript原生对象location的一个属性,它

返回URL中域名之后的部分

var path = location.pathname;    (假如我们正在访问页面

www.qq.com/mycode/demo.html

。那么location.pathname就等于/mycode/demo.html。

2、再创建一个变量pathArray,然后使用原生的java Script字符串方法

.split()把pathname从/处拆分

,得到一个数组。

var pathArray = path.split( ‘/’ );      (拆分结果,即pathname的值是[‘mycode’ , ‘demo.html’]。

3、创建最后一个变量pArrLength,把它的

值设置为pathArray的长度

var pArrLength = pathArray.length;

4、创建一个for循环,迭代处理数组pathArray的每一个值。然后使用属性选择器选中包含其中某个值的所有链接,为其加上selected类。这里的属性选择器使用了通配符(*),他会匹配href的任意部分。

for(i = 0 ; i < pArrLength;i++){

$(” a[ href*=



“+pathArray[i] + ”



]”).addClass(“selected”);

}





三、创建简单的下拉菜单。

1、创建html文件。

<div id=”header”>

<ul

id=”navigation”

>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Our Work</a>

<ul

class=”subnav”

>

<li><a href=”#”>Example 1</a></li>

<li><a href=”#”>Example 2</a></li>

<li><a href=”#”>Example 3</a></li>

</ul>

<li><a href=”#”>Services</a>

<ul

class=”subnav”

>

<li><a href=”#”>Service 1</a></li>

<li><a href=”#”>Service 2</a></li>

<li



版权声明:本文为Arther90原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。