超简单的ZBLOG导航高亮代码

超简单的zblog导航高亮教程

先在UL代码上加上相关ID，如下面代码：

<ul class="nav-ul" id="starlist">

JS代码：

jQuery(document).ready(function($){
     
	//nav 
	$("#mnavh").click(function() {
        $("#ulogin").toggle();
        $("#ulogin").toggleClass("open");
        $(".sub").hide();
        //$(".sub").first().show();
    });
			
    var obj=null;
    var As=document.getElementById('starlist').getElementsByTagName('a');
    obj = As[0];
    for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
    obj=As[i];}
    obj.id='selected';
	
	 $(window).scroll(function() {
        var h = $("body").height() - window.getHeight();
        //console.log(h);
        if ($(window).scrollTop() > 28 && h > 120) {
            $(".topnav").addClass("is-fixed").find("").fadeOut(400);			
		

        } else if ($(window).scrollTop() < 28) {
            $(".topnav").removeClass("is-fixed").find("").fadeIn(400);
		

        }
    });
 
	
    $("#tab li").click(function(){ 
	 var index=$(this).index();  
	 $(this).parents().next().find(".tab-box").hide().eq(index).show();	 
	 $(this).addClass("tab-current").siblings().removeClass("tab-current"); 
    });
	

  //nav menu
  
  $(".menu").click(function(event) {	
  $(this).children('.sub').slideToggle();
  $(this).siblings('.menu').children('.sub').slideUp('');	
   event.stopPropagation()
   });
   $(".menu a").click(function(event) {
   event.stopPropagation(); 
   });
   $(".sub li").click(function(event) {
   event.stopPropagation(); 
   });
	

  
	
	    //scroll to top
        var offset = 300,
        offset_opacity = 1200,
        scroll_top_duration = 700,
        $back_to_top = $('.icon-top');
		
    $(window).scroll(function () {
        ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if ($(this).scrollTop() > offset_opacity) {
            $back_to_top.addClass('cd-fade-out');
        }
    });
   
    $back_to_top.on('click', function (event) {
        event.preventDefault();
        $('body,html').animate({
                scrollTop: 0,
            }, scroll_top_duration
        );
    });
	

	
	
});

    window.getHeight = function() {
    if (window.innerHeight != undefined) {
        return window.innerHeight;
    } else {
        var B = document.body
          , D = document.documentElement;
        return Math.min(D.clientHeight, B.clientHeight);
    }
}

然后加上CSS样式代码：

#starlist li a {
    display: inline;
    float: left;
    padding: 0 16px;
    color: #fff;
}
#starlist li a:hover, #starlist #selected, .selected > a, #starlist li:hover {
    color: #00c1de;
}