向wuyq11等提问：RadTabStrip样式如何设置

[就是just4]

向wuyq11等提问：RadTabStrip样式如何设置

RadTabStrip版本2008.1.415.35，选择Outlook皮肤时很是糟糕，没有框线，给RadMultiPage添加样式"border: solid 1px #b3b3b3;border-top: none;"时，就差Tab标签头的border-bottom，手工给ul和li添加达不到预期效果，熟悉这个控件的朋友给支下招；控件自带的RadTab添加SelectedCssClass无法实现预期效果；RadTabStrip默认只有Office2007的皮肤添加了bakcground，但这不是想要的简单实用效果

另外问下大家web版哪个tabcontrol好用呀，不要说自带的MultiView，不要说AjaxControlToolkit中TabContainer，也不要纯Html+css/js实现的滑动门之类的，需要一个轻量级且实用的tabcontrol

希望实现样式贴图(如何添加红线所示border-bottom)


aspx代码为：

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Outlook" MultiPageID="RadMultiPage1"
SelectedIndex="0" Width="100%">
    <Tabs>
        <telerik:RadTab runat="server" Text="tab1" PageViewID="RadPageView1" Selected="True">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="tab2" PageViewID="RadPageView2">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"
CssClass="tab-main">
    <telerik:RadPageView ID="RadPageView1" runat="server" Style="width: 100%; height: 100%;
    padding: 12px;">
        <table class="form" cellspacing="0" cellpadding="0" width="100%" border="0">
            <tr>
                <td class="form-item" width="18%" height="25px;">
                    test1：
                </td>
                <td>
                    <asp:TextBox ID="txtCompany" runat="server" Width="207px">
                    </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="form-item" width="18%" height="25px;">
                    test2：
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Width="207px">
                    </asp:TextBox>
                </td>
            </tr>
        </table>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server" Style="width: 100%; height: 100%;
    padding: 12px;">
        test2
    </telerik:RadPageView>
</telerik:RadMultiPage>
<asp:MultiView ID="MultiView1" runat="server">
    <asp:View ID="View1" runat="server">
    </asp:View>
    <asp:View ID="View2" runat="server">
    </asp:View>
</asp:MultiView>

html源码为：

<div id="RadTabStrip1" class="RadTabStrip RadTabStrip_Outlook RadTabStripTop_Outlook"　style="width:100%;">
    <!-- 2008.1.415.35 -->
    <div class="rtsLevel rtsLevel1">
        <ul class="rtsUL">
            <li class="rtsLI rtsFirst">
                <a class="rtsLink rtsSelected" href="#">
                    <span class="rtsOut">
                        <span class="rtsIn">
                            <span class="rtsTxt">
                                tab1
                            </span>
                        </span>
                    </span>
                </a>
            </li>
            <li class="rtsLI rtsLast">
                <a class="rtsLink rtsAfter" href="#">
                    <span class="rtsOut">
                        <span class="rtsIn">
                            <span class="rtsTxt">
                                tab2
                            </span>
                        </span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
    <input id="RadTabStrip1_ClientState" name="RadTabStrip1_ClientState" type="hidden"/>
</div>
<div id="RadMultiPage1" class="tab-main">
    <div id="RadPageView1" style="width: 100%; height: 100%;
    padding: 12px;">
        <table class="form" cellspacing="0" cellpadding="0" width="100%" border="0">
            <tr>
                <td class="form-item" width="18%" height="25px;">
                    test1：
                </td>
                <td>
                    <input name="TextBox1" type="text" id="TextBox1" style="width:207px;" />
                </td>
            </tr>
            <tr>
                <td class="form-item" width="18%" height="25px;">
                    test2：
                </td>
                <td>
                    <input name="TextBox2" type="text" id="TextBox2" style="width:207px;" />
                </td>
            </tr>
        </table>
    </div>
    <div id="RadPageView2" style="display:none;width: 100%; height: 100%;
    padding: 12px;">
        test2
    </div>
    <input id="RadMultiPage1_ClientState" name="RadMultiPage1_ClientState"
    type="hidden" />
</div>

[huangwenquan123]

帮顶
只会js+css实现

[wuyq11]

没使用过
看看官网的相关文档
看看jquery的tab

[liaoyukun111]

只会你说的不要的东西的飘过

[就是just4]

[Quote=引用 2 楼 wuyq11 的回复:]
没使用过
看看官网的相关文档
看看jquery的tab
[/Quote]

JQuery不是太会了，学的东西太多太杂了，现在没动力再学了，Demo中的案例都没有这方面的东西

也不知在系统开发中，这种Tab页面你们是如何快捷有效实现的，就烦弄样式这东西，浏览器不兼容更是郁闷得很

[阿非]

http://stilbuero.de/jquery/tabs_3/

http://www.cnblogs.com/bestfc/archive/2009/06/08/1498737.html

[皇城龙三]

http://www.codeproject.com/KB/tabs/magictabcontrol.aspx

这个是开源的，还不错，楼主看看

[皇城龙三]

http://www.codeproject.com/KB/tabs/flattabcontrol.aspx

[就是just4]

[就是just4]

[阿非]

jquery tab 不好用 ？

[悔说话的哑巴]

还是尝试jquery的tab
这个吧

[fhjzgsy]

啊非的 jquery真的很强大