Jquery UIのタブ - タブの形状を変更する

Question

こんにちは、JqueryのUIを使用してタブの形状を変更することができたら、私はさまよっていました。

私は以下のタブに類似したものをお持ちですか？

それとも誰かが、この使用してCSSをachiveする私のいずれかの方法を助言するだろうか？

Answer 1

私はタブスイッチングのためにいくつかのjqueryを使用しましたが、タブのスタイリングは完全にCSSで行われました。これはあなたが探していたものですか？

以下のスニペットやこのjsfiddle

$('#tabwrapper ul li').on('click', function() { 
 
\t var divToShow = $(this).data('target'); 
 
    var root = $(this).closest('div'); 
 
    $('> div > div', root).hide(); 
 
    $('> div > div#' + divToShow, root).show(); 
 
});

html, body, div, ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin-top: -15px; 
 
    margin-left: -1px; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 4px 15px 4px 30px; 
 
\t position: relative; 
 
\t background: #88b7d5; 
 
\t border: 1px solid #c2e1f5; 
 
    cursor: pointer; 
 
} 
 
li + li { 
 
    margin-left: 0; 
 
} 
 
li:after, li:before { 
 
\t left: 100%; 
 
\t top: 0%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
    z-index: 1; 
 
} 
 
li:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-left-color: #88b7d5; 
 
\t border-width: 13px; 
 
\t margin-top: 0px; 
 
} 
 
li:before { 
 
\t border-color: rgba(194, 225, 245, 0); 
 
\t border-left-color: #c2e1f5; 
 
\t border-width: 14px; 
 
\t margin-top: -1px; 
 
    z-index: 1; 
 
} 
 
li:hover { 
 
    background-color: #444; 
 
    color: #c2e1f5; 
 
} 
 
li:hover:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-left-color: #444; 
 
    } 
 
#tabwrapper { 
 
    border: 1px solid #88b7d5; 
 
    display: inline-block; 
 
    padding-right: 12px; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
} 
 
#tabwrapper > div { 
 
    clear: both; 
 
    padding: 10px 10px; 
 
} 
 
#tabwrapper > div > div { 
 
    display: none; 
 
    mine-height: 50px 
 
} 
 
#tabwrapper > div > div:first-child { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabwrapper"> 
 
<ul> 
 
    <li data-target="tabcontent1">test1</li> 
 
    <li data-target="tabcontent2">test2</li> 
 
    <li data-target="tabcontent3">test3</li> 
 
    <li data-target="tabcontent4">test4</li> 
 
</ul> 
 
<div style="clear: both;"> 
 
    <div id="tabcontent1">content1</div> 
 
    <div id="tabcontent2">content2</div> 
 
    <div id="tabcontent3">content3</div> 
 
    <div id="tabcontent4">content4</div> 
 
</div> 
 
</div>