asp.net中的css垂直标签

【问题标题】：css vertical tabs in asp.netasp.net中的css垂直标签
【发布时间】：2012-03-19 09:55:13
【问题描述】：

我想要一个使用 css 的垂直选项卡菜单，它看起来像 ajax 控件工具包选项卡容器。请参阅second example in the link。我需要用 css 来实现这一点，而不必使用 ajax 控制工具包。

【问题讨论】：

我不认为这里是关于 CSS 的，而是关于如何在回发之间维护面板状态的更多信息。
或者我可以用asp.net菜单控制吗？？

标签： asp.net css ajaxcontroltoolkit menubar

【解决方案1】：

您可以查看它生成的 CSS 并制作一个 jQuery 脚本来控制状态，如下所示：

$(document).ready(function() {       
    var tabs = $('div.tabs > div');
    tabs.hide().filter(':first').show();

    $('ul.tab_nav li a').click(function() {
        tabs.hide();
        tabs.filter(this.hash).show();
        $('ul.tab_nav li a').parent().removeClass('selected');
        $(this).parent().addClass('selected');
        return false;
    }).filter(':first').click();
}

使用一些 HTML，例如：

<ul class="tab_nav">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
</ul>
<div class="tabs">
    <div id="tab-1">
        Tab 1
    </div>
    <div id="tab-2">
        Tab 2
    </div>
</div>

【讨论】：