`
a11257410
  • 浏览: 887 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery智能判断是否是当前导航并加标记

jQuery智能判断导航加标记 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery智能判断是否是当前导航并加标记</title>
    <script src="http://www.webdm.cn/themes/script/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd
        {
            padding: 0;
            margin: 0;
        }
        li
        {
            list-style: none;
        }
        img
        {
            border: none;
        }
        em
        {
            font-style: normal;
        }
        a
        {
            color: #555;
            text-decoration: none;
            outline: none;
            blr: this.onFocus=this.blur();
        }
        a:hover
        {
            color: #000;
            text-decoration: underline;
        }
        body
        {
            font-size: 12px;
            font-family: Arial,Verdana, Helvetica, sans-serif;
            word-break: break-all;
            word-wrap: break-word;
        }
        .clear
        {
            height: 0;
            overflow: hidden;
            clear: both;
        }
        .nav
        {
            width: 950px;
            height: 29px;
            margin: 20px auto 0;
            background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x 0 -180px;
            position: relative;
        }
        .navl
        {
            position: absolute;
            left: 0;
            width: 3px;
            height: 29px;
            background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat 0 -150px;
        }
        .navr
        {
            position: absolute;
            right: 0;
            width: 3px;
            height: 29px;
            background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat right -150px;
        }
        .nav ul
        {
            margin-left: 10px;
        }
        .nav ul li
        {
            float: left;
            line-height: 29px;
            display: inline;
            text-align: center;
            padding-left: 5px;
            font-size: 14px;
            font-weight: bold;
            background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) no-repeat right -208px;
        }
        .nav ul li a
        {
            float: left;
            color: #FFF;
            padding: 0 10px;
        }
        .nav ul li.select
        {
            background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x 0 -240px;
            position: relative;
            margin-top: -4px;
        }
        .nav ul li.select a
        {
            background: url(http://www.webdm.cn/images/20101216/1/navbg.gif) repeat-x right -240px;
            height: 33px;
            line-height: 33px;
            color: #333;
            text-indent: -3px;
        }
    </style>
    <script type="text/javascript">
        // nav
        $(function shownav() {
            var a1 = window.location.href;
            var a2 = $(".nav ul li");

            var strs = new Array();
            strs = a1.split("/");

            for (var i = 0; i < a2.length; i++) {
                if ($(a2[i]).children().attr("href") == strs[(strs.length) - 1]) {
                    $(a2[i]).addClass("select");
                    return;
                }
            }
        });

 

//或者

 

$(document).ready(function () {

    $(".nav  ul li").each(function (index) {

        var strs = new Array();

        strs = window.location.href.split("/");

        var http = strs[(strs.length) - 1];

        var liValue = $(".nav  ul li").eq(index).children().attr("href").substr(0, 4);

 

        if (http.indexOf(liValue) >= 0) {

            $(".nav  ul li").removeClass("select");

            $(".nav  ul li").eq(index).addClass("select");

        }

        $(this).click(function () {

            $(".nav  ul li").removeClass("select");

            $(".nav  ul li").eq(index).addClass("select");

        });

    });

});

    </script>
</head>
<body>
    <div class="nav">
        <em class="navl"></em><em class="navr"></em>
        <ul>
            <li><a href="nav.html">首 页</a></li>
            <li><a href="nav2.html">手机卖场</a></li>
            <li><a href="nav3.html">数码天下</a></li>
            <li><a href="nav4.html">时尚女人</a></li>
            <li><a href="nav5.html">家居装饰</a></li>
        </ul>
    </div>
    <br />
</body>
</html>

网上的都是不能用的，我又修改了一下，可以用的

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics