js处理导航菜单当前位置高亮

tsai — Sun, 12 Sep 2010 15:01:40 +0000

在wordpress中，当用Category或Page当导航菜单的话，wordpress已经处理好当前li标签的class了，所以用wordpress的Category或Page当导航菜单不用作本文的处理。我在bbpress中，想把每个父版块做成导航菜单的时候碰到这个问题的。

Jeremy Keith 在《JavaScript DOM编程艺术》一书中为我们做了一个小的例子，例子中使用了一段简单的高亮当前位置的 js 代码，代码如下：

function highlightPage() {
       if (!document.getElementsByTagName) return false;
       if (!document.getElementById) return false;
       if (!document.getElementById("navigation")) return false;

       var nav = document.getElementById("navigation");
       var links = nav.getElementsByTagName("a");

       for (var i=0; i
原理很简单，就是首先获取当前的网址，然后遍历菜单栏，如果当前网址包含了菜单栏内的链接地址，就给这个链接的 class 定义为 here，从而达到高亮的效果。但是我在使用的过程中遇到了一些特殊情况，这段代码就不能满足我的要求了。
先看以下菜单栏：

   
      首页
      第二页
      第三页
   


如果我是用了上述 js 代码，那么当我停留在第二页或者第三页的时候首页同时也会被高亮，这并不是我想要的结果，解决方法有二：
第一种方法，可以在首页的网址后边再加一个 index.php 或者其他的后缀，这样子就可以解决问题，优点是简单，缺点是无法解决更复杂的菜单，比如在一个使用了 URL 静态化的二级页面，这种方法将无法实施。
第二种方法，采用 split() 获得更精确的定位。
split() 方法用于把一个字符串分割成字符串数组，这里我们将网址通过“/”进行拆分，首先是拆分当前网址：
  
var windowLocation = window.location.href.split("/");

现在我们将网址拆分成一个数组，然后我们将获得网址最后的部分，但是需要注意的是，http://yoursite.net/ 和 http://yoursite.net 是两个不同的网址，如果我们漏掉了其中的一个，可能会导致我们的脚本无效，因此我们需要判断这个网址的末尾是否含有”/”。
JS 代码：
var windowLocation = window.location.href.split("/");
var locationLong = windowLocation.length;
var locationHref;

if(windowLocation[locationLong-1] == "") {
    locationHref = windowLocation[locationLong-2];
} else {
    locationHref = windowLocation[locationLong-1];
}

当当前的网址含有”/”也就是 windowLocation 的最后一个为”"的时候，我们就取倒数第二个值，否则我们就取倒数第一个值。取好当前网址的值后，同理我们也要这样子取一下菜单栏的地址：
var menu = document.getElementById("menu");
var menuLinks = menu.getElementsByTagName("a");

for(var i=0; i
当然，如果页面还有存在页面翻页参数，如在同一个菜单下默认第一页链接是http://yoursite.net/,第二页链接是http://yoursite.net/?page=2,这样必须在后面的截取段进行进一步的if匹配判断，方法类似。

这样代码就可以解决我们的问题了，优点是实用性较高，但是代码有些复杂。
本文部分内容来自：http://blog.admin9.com/?p=888

jquery实现有默认内容的展开收起效果

tsai — Sat, 11 Sep 2010 09:34:55 +0000

前些天在实现一个网站的需求：1、展示一个分类里边的条目；2、默认显示前十条，并显示一个展开按钮，点击展开按钮，点击后下拉显示该分类下所有条目；3、展开后，按钮变为收起按钮，点击收起恢复为默认显示条目。

试图想用jquery的slideToggle()、animate()函数实现，发现行不通，处理不了剩余内容的展开收起。后来想到通过联系展开按钮的class与主题内容的id匹配，在按钮的click事件里通过修改css和jquery的animate()函数结合实现想要的效果，代码如下(这边显示一段文字，默认显示文字前面的一部分内容)：

jquery部分：

$(".more-btn").click(function(){
			 if($("#"+this.parentNode.className).css("height")=="100px"){
			  	$("#"+this.parentNode.className).css("height","auto");
			  	this.value="收起";
			  }
			 else{
			 	$("#"+this.parentNode.className).animate({height:"100px"},"slow");
			 	this.value="展开";
			 	}
		  });

css部分：

body {
			margin:0;
			padding:40px 40px;
			background:#fff;
			font:Arial, Helvetica, sans-serif;
			font-size:13px;
			line-height:180%;
		}
		.case{
			width:240px;
		}
		.entry{
			clear: both;
			line-height: 1.6em;
			width:223px;
			height:100px;
			overflow:hidden;
			line-height:18px;
			border-top:#ff9933 1px solid;
			border-left:#ff9933 1px solid;
			border-right:#ff9933 1px solid;
			padding-left:5px;
		}
		.more-btn{
			padding:0;
			width:230px;
			border-left:#ff9933 1px solid;
			border-right:#ff9933 1px solid;
			height:27px;
			background:#f4dc92;
			font-size:14px;
			font-weight:bolder;
			color:#000;
		}

html代码：





demo


	    	
		
	      	显示的内容在此。。。

demo：猛击此查看demo

风牛菜籽 » javascript

js处理导航菜单当前位置高亮

jquery实现有默认内容的展开收起效果