以前总手写TAB选项卡,总要写很多代码,ASP.net里AJAX - Container已为我们提供了选项卡功能,但默认样式比较难看,今天研究了一下它的CSS样式,自已写了一个给大家分享一下:
最终效果:
所用背景图片如下:
Tab_Option_bg.gif
Tab_Option_bg_ON.gif
Tab_Option_bg_OFF.gif
Aspx文件:
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="smenu" runat="server" ActiveTabIndex="3" CssClass="ajax_tab_menu"> //把默认样式改为自定义的CSS样式样 <cc1:TabPanel runat="server" HeaderText="已通过申核" ID="TabPanel1"> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="申核中..."> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="未通过审核"> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="过期信息"> </cc1:TabPanel> </cc1:TabContainer>
/* CSS样式 */
.ajax_tab_menu .ajax__tab_header /*整体按钮底样式*/ { font-family:宋体; height:28px; font-size:12px; background:url("images/Tab_Option_bg.gif") repeat-x bottom; } .ajax_tab_menu .ajax__tab_body /*资料区*/ { font-family:宋体; font-size:12px; border:0px solid #999999; border-top:0; background-color:#ffffff;} .ajax_tab_menu .ajax__tab_tab /*预设样式*/ { background:url("images/Tab_Option_bg_OFF.gif") repeat-x; width:78px; height:28px; line-height:28px; text-align:center; margin-right:4px; margin:0; } .ajax_tab_menu .ajax__tab_hover .ajax__tab_tab /*鼠标经过样式*/ { background:url("images/Tab_Option_bg_ON.gif") repeat-x; width:78px; height:28px; color:#FFFFFF; line-height:28px; text-align:center; } .ajax_tab_menu .ajax__tab_active .ajax__tab_tab /*当前使用中样式*/ { background:url("images/Tab_Option_bg_ON.gif") repeat-x; width:78px; height:28px; line-height:28px; text-align:center; color:#FFFFFF; }