导航菜单样式

导航菜单样式

创建时间：2014-5-27 16:40

修改时间：2014-5-27 16:50

来源：

CSS样式中加入

<style>

        .navlist

        {

            border-bottom: 1px solid #ccc;

            margin: 0;

            padding-bottom: 19px;

            padding-left: 10px;

        }

        .navlist ul, .navlist li

        {

            display: inline;

            list-style-type: none;

            margin: 0;

            padding: 0;

        }

        .navlist a:link, .navlist a:visited

        {

            background: #CCFF;

            border: 1px solid #ccc;

            color: #666;

            float: left;

            font-size: small;

            font-weight: normal;

            line-height: 14px;

            margin-right: 8px;

            padding: 2px 10px 2px 10px;

            text-decoration: none;

             outline: none;

        }

        .navlist a.cik

        {

            background: #fff;

            border-bottom: 1px solid #fff;

            color: #000;

        }

        .navlist a:hover

        {

            color: #f00;

        }

</style>

页面上：

                    <ul class="navlist">

                        <li><a id="defau" href="ModelInfoList.aspx?RightFramePage=ModelFaultStatistics" target="Right">

                            <span>缺陷统计</span></a></li>

                        <li><a href="ModelInfoList.aspx?RightFramePage=ModelLabStatistics" target="Right"><span>

                            实验统计</span></a></li>

jquery

        //鼠标点击后，当前页面的标签字体显示不同的颜色。

        $(document).ready(function() {

            $("#defau").addClass("cik");

            $(".navlist a").click(function() {

                $(".navlist a").removeClass("cik");

                $(this).addClass("cik");

            });

        });

 

原文链接：http://note.youdao.com/share/?id=0f1e2e9d1da6c9612aecb279598aa30e&type=note

感谢yy分享