一、让页面上所有的链接都在新窗口打开。
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