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だけのデザインです。3 つのタブがあるため、背景画像が必要になります。