</pre><pre name="code" class="html"><img src="https://img-blog.csdn.net/20160505153431665?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />效果
<pre name="code" class="html"><style type="text/css">
body { margin: 0; padding: 0; } .container { font-family: 微软雅黑; background: #fff; padding: 0px; margin: 10px auto; overflow: hidden; } .container .menu { width: 120px; margin-left: 0px; float: left; border-right: 1px solid #aaa; } .container .menu ul { display: none; } .container .menu ul li { height: 28px; line-height: 28px; } .container .menu ul li a:hover { background: #9FB6CD; color: #fff; } ul { list-style: none; } a { text-decoration: none; color: #000; font-size: 14px; display: block; width: 100px; height: 26px; padding-left: 10px; } .container .menu .selected { background: #ccc; } </style>
<script type="text/javascript">
$(document).ready(function () {
function myfunction(li, li_a, menu_tab) {
li.click(function () {
var index = $(this).index();
menu_tab.eq(index).addClass("active").siblings().removeClass("active");
li_a.removeClass("selected");
li_a.eq(index).addClass("selected").siblings().removeClass("selected");
});
}
myfunction($(".container .menu .ulmenu1 li"));
myfunction($(".container .menu .ulmenu2 li"));
myfunction($(".container .menu .ulmenu3 li"));
$(function () { //ul/li的折叠效果
$(".menu > ul").eq(0).show();
$(".menu h3").click(function () {
//找menu对应的tab
$(".menu_tab > div").removeClass("active");
var val = ($(this).next().attr('class'));
var menu_value = (val.substring(val.length - 1));
$(".container .content .menu" + menu_value + " .tab:first-child").addClass("active");
$(".container .menu .ulmenu" + menu_value + " li>a").removeClass("selected");
$(".container .menu .ulmenu" + menu_value + " li a").eq(0).addClass("selected"); //默认设置为被选中状态
});
});
$(function () { // 导航 >
$(".container .menu > h3").click(function () {
$(".container .content .A1").empty().text($(this).text());
});
});
});
//按钮变色
function ss(x) {
$(".container .menu .ulmenu1 li>a").removeClass("selected");
};
</script>
<div class="container" style="padding: 0px; width: 110px;">
<div class="menu" style="margin-left: 0px;">
<ul class="ulmenu1">
<li>
<asp:LinkButton ID="btnDWJBQK" runat="server" OnClick="btnDWJBQK_Click" OnClientClick="ss(this)"
EnableViewState="false">单位基本情况</asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="btnRYJBQK" runat="server" OnClick="btnRYJBQK_Click" OnClientClick="ss(this)"
EnableViewState="false">人员基本情况</asp:LinkButton>
</li>
</ul>
</div>
</div>
protected void btnDWJBQK_Click(object sender, EventArgs e)
{
btnClick("DWJBQK", "单位基本情况;");
btnDWJBQK.CssClass = "selected";
}
protected void btnRYJBQK_Click(object sender, EventArgs e)
{
btnClick("RYJBQK", "人员基本情况;");
btnRYJBQK.CssClass = "selected";
}