选项卡面板的 CSS

Question

我想要像 这张图片 这样的选项卡面板

我想在 ASP.NET 上实现相同的功能选项卡面板。但是，如果我获得 CSS，我将使其与 ASP.NET 选项卡兼容。

任何人都可以指导我如何做到这一点，或者教程参考。因为我不知道这个选项卡面板 CSS 叫什么。

Answer 1

不确定我完全理解你想要什么（我不懂 ASP）。

但据我了解，您可以使用 jQuery UI 选项卡 并自定义其 CSS。

示例：

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.</p>
    </div>
</div>

jQuery：

$(function() {
    $( "#tabs" ).tabs();
});

Answer 2

它们实施起来很棘手。仅从 CSS 的角度来看，您需要将 tab 实现为

元素。示例

<前><代码>

;
• tab1
• tab2

...

设计的其余部分只是 CSS。由于您有三角形选项卡，因此您将需要背景图像。