jQuery导航菜单防刷新

最新推荐文章于 2019-03-07 15:52:11 发布

weixin_34242331

最新推荐文章于 2019-03-07 15:52:11 发布

阅读量198

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/biye/p/3327560.html

版权

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

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;
}

View Code

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="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">显示1</a></li>
                <li><a href="Default.aspx?id=2">显示2</a></li>
                <li><a href="Default.aspx?id=3">显示3</a></li>
                <li><a href="Default.aspx?id=4">显示4</a></li>
                <li><a href="Default.aspx?id=5">显示5</a></li>
            </ul>
        </div>
    </form>
</body>
</html>

View Code

最终效果图:

转载于:https://www.cnblogs.com/biye/p/3327560.html

weixin_34242331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery导航菜单防刷新

为了实现最主要的功能，只写了一个粗糙的案例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...
复制链接

扫一扫