首页 未命名内容详情

超简单的ZBLOG导航高亮代码

2026-01-10 3 897698882
超简单的ZBLOG导航高亮代码

站点名称:超简单的ZBLOG导航高亮代码

所属分类:未命名

官方网址:

SEO查询: 爱站网 站长工具

进入网站

站点介绍

超简单的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;}