自己写的一个导航，CSS+UL

CSS样式

<style type="text/css">
        ul{list-style: none;font-size: 12px;}
        ul li{float: left;line-height: 33px;text-align: center;letter-spacing:1px; margin-left:3px; font-family:@微软雅黑; font-weight:bold; }
        ul li a{color: #fff;display: block;height: 33px; text-decoration: none; padding-left:15px; padding-right:15px;}
        ul li a:hover {color: #fff;display: block; height: 33px;text-decoration: none;background-color: #E06513; padding-left:15px; padding-right:15px;}
         .select{ background-color: #E06513;}
         .test
         {
             background-color: #555555; height:33px; min-width:700px;
             -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
             -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
             }
         .bom{background-color: #E06513; height:3px;min-width:600px;}
    </style>

说明：

.test里设置了，div的右上角和左上角为圆角，但在IE中不兼容，欢迎高手给意见。

javascript脚本，控制点击之后，样式的改变

<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("li").each(function (index) {
                $(this).click(function () {
                    $("li").removeClass("select");
                    $("li").eq(index).addClass("select");                    
                });
            });
        });
    </script>

HTML

HTML Code 
<body>
    <form id="form1" runat="server">
    <div class="test">
    <ul>
        <li class="select"><a href="LoadTree.aspx" target="iframecon">区域(机柜/设备)</a></li>
        <li><a href="SheBeiDuanKou.aspx" target="iframecon">设备端口</a></li>
        <li><a href="TiaoXian.aspx" target="iframecon">跳线维护</a></li>
        <li><a href="XinXiDian.aspx" target="iframecon">信息点</a></li>        
        <li><a href="#">联系我们</a></li>
    </ul>
    </div>
    <div class="bom"></div>

    <iframe name="iframecon" id="iframecon" src="LoadTree.aspx" width="100%" onload="Javascript:SetWinHeight(this)" scrolling="no" frameborder="0"></iframe>
    </form>
    <script type="text/javascript" language="javascript">
        function SetWinHeight(obj) {
            //控制iframe的高度，自动
            var win = obj;
            if (document.getElementById) {
                if (win && !window.opera) {
                    if (win.contentDocument && win.contentDocument.body.offsetHeight)
                        win.height = win.contentDocument.body.offsetHeight;
                    else if (win.Document && win.Document.body.scrollHeight)
                        win.height = win.Document.body.scrollHeight;
                }
            }
        } 
</script> 
</body>

效果截图

posted @ 2012-10-12 15:50  影像。  阅读(232)  评论(0)  编辑  收藏  举报