包含文件导航栏在不同页面之间的跳转----样式改变

最新推荐文章于 2023-09-20 08:50:45 发布

weixin_30856965

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量262

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/jingzi111/p/5053582.html

版权

<div class="nav right">
<ul>
<li><a href="a.php" class="home_page">首页</a></li>
<li><a href="b.php">APP开发</a></li>
<li><a href="c.php">产品中心</a></li>
<li><a href="d.php">案例展示</a></li>
<li><a href="e.php">资讯中心</a></li>
<li><a href="f.php">APP下载</a></li>
</ul>
</div>

效果如下：点击app开发或者其他选项，使之颜色发生更改

产生原因：点击不同的项目，页面发生改变，因此一般的js或者css（：hover ：visited ：active ：link ）不能实现这种效果

解决方法：

一使用get传值的方式

直接在URL请求后添加；如:< a href="thexuan.jsp?action=transparams&detail=directe">直接传递参数< /a>

<li><a href="a.php" <?php if(参数=="首页") echo "class=\"home_page\"" ?>>首页</a></li>

二使用cookie传值(未验证)

    function writeCookie(name, value, hours)//写入cookie
    {
        var expire = "";
        if(hours != null)
        {
            expire = new Date((new Date()).getTime() + hours * 3600000);
            expire = "; expires=" + expire.toGMTString();
        }
        document.cookie = name + "=" + escape(value) + expire;
    }
    // Example:
    // alert( readCookie("myCookie") );-->
    function readCookie(name)//读取cookie
    {
        var cookieValue = "";
        var search = name + "=";
        if(document.cookie.length > 0)
        {
            offset = document.cookie.indexOf(search);
            if (offset != -1)
            {
                offset += search.length;
                end = document.cookie.indexOf(";", offset);
                if (end == -1) end = document.cookie.length;
                cookieValue = unescape(document.cookie.substring(offset, end))
            }
        }
        return cookieValue;
    }

三使用id 通过js(未验证)

document.getElementById("id").menu.className=样式

四通过不同的URL地址对比添加class 更改颜色

<style>
.on{background:red;}
</style>
<script>
$(function(){
    var navLi=$('li') //此处填写你的导航html对象
    var windowUrl=window.location.href; //获取当前url链接
    navLi.each(function(){
        var t=$(this).find('a').attr('href');
        if(t==windowUrl){
            $(this).addClass('on');  //添加当前位置样式 
        }
    })
})
</script>

转载于:https://www.cnblogs.com/jingzi111/p/5053582.html