css - 标签面板的 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 的角度来看，您需要将选项卡实现为

元素。例子

<ul>
<li>tab1<li>
<li>tab2</li>
...
</ul>

其余的设计只是 CSS。由于您有三角形标签，因此您将需要背景图片。