jQuery导航菜单防刷新

开发者浩然技术 2022年11月17日

0 收藏 580 点赞 3,818 浏览 1053 个字

为了实现最主要的功能，只写了一个粗糙的案例

CSS样式

ul,li{ list-style-type:none;}
.nav
{
    width: 100%;
    height: 35px;
    line-height: 35px;
}
.nav ul{ width:100%; float:left;}
.nav li{ width:100px; float:left; text-align:center;}
.nav li a, .nav li a:link
{
    background-color: #C0C0C0;
    color: #000000;
    text-decoration:none;
    display:block;
}
.nav .hover
{
    background-color: #808080;
    color: #0000FF;
    text-decoration: none;
    display:block;
}

HTML及js代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <link href="style/css.css" rel="external nofollow"  rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $(".nav ul li a").each(function () {
                if ($($(this))[0].href == String(window.location)) {
                    $(this).addClass("hover");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="nav">
            <ul>
                <li><a href="Default.aspx?id=1" rel="external nofollow" >显示1</a></li>
                <li><a href="Default.aspx?id=2" rel="external nofollow" >显示2</a></li>
                <li><a href="Default.aspx?id=3" rel="external nofollow" >显示3</a></li>
                <li><a href="Default.aspx?id=4" rel="external nofollow" >显示4</a></li>
                <li><a href="Default.aspx?id=5" rel="external nofollow" >显示5</a></li>
            </ul>
        </div>
    </form>
</body>
</html>