Jquery UI Tabs - ändern Sie die Form der Tabs

Question

Hallo, ich war Wandern, wenn es möglich ist, die Form der Tabs zu ändern, vorzugsweise mit Jquery UI.

Ich möchte etwas ähnliches zu den Tabs unten haben.

Oder könnte mein jede Methode jemand raten diese mit CSS achive?

Answer 1

Ich habe einige Jquery für die Tab-Switching verwendet, aber die Tab-Styling ist komplett mit CSS gemacht, ist das, was Sie gesucht haben?

Schnipsel unten oder diese 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>