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>
效果截图
