html/cssを使用してリンクをタブのように見えるようにするにはどうすればよいですか？

Question

私はから働いています。このワイヤーフレーム持っている：私は次のように読んでタブ付きのアイテムにしようとしていますhttp://problemio.com/wireframe.pdf

彼らはワイヤーフレーム上にあるとしてタブ付き見て、「継続的な議論を| ...ソリューション履歴|ソリューションを提案します」。

これまではJavaScriptを使用して正しい要素を表示/非表示することができましたが、どうしたらよいかわからないのは、アクティブなタブを強調表示し、タブを囲む線を描画する方法です。ここで

は、これまでのところ、私が持っているものの一例である：私は、それぞれのdivをリンクさせる http://www.problemio.com/problems/problem.php?problem_id=179

場合であっても、どのように私はそれらのdivのスタイリングを切り替えるのですか？

ありがとうございます！

Answer 1

jQueryUIタブを使用するのが最も簡単です。例ここhttp://jqueryui.com/demos/tabs/

Answer 2

すでに上映があり、ダウン隠し、非jQueryのオプションを探しているなら、あなたがこのような何かを試みることができる：それはストレートアンカー要素の基本的なスタイリングです

http://jsfiddle.net/wqEdj/

を。

Answer 3

ここで実行して実際に動作するCSS/JSソリューションです。 JQueryが使用されていますが、標準のJSに簡単に置き換えることができます。画像は必要ありません。

このソリューションのソース： https://css-tricks.com/better-tabs-with-round-out-borders/

ラインの下のタブを持つ別の関連する例はここで見つけることができます：http://codepen.io/chriscoyier/pen/JozNqX

$(function() { 
 
    $("li").click(function(e) { 
 
    e.preventDefault(); 
 
    $("li").removeClass("selected"); 
 
    $(this).addClass("selected"); 
 
    }); 
 
});

.tabrow { 
 
    text-align: center; 
 
    list-style: none; 
 
    margin: 20px 0 20px; 
 
    padding: 0; 
 
    line-height: 24px; 
 
    height: 26px; 
 
    overflow: hidden; 
 
    font-size: 12px; 
 
    font-family: verdana; 
 
    position: relative; 
 
} 
 
.tabrow li { 
 
    border: 1px solid #AAA; 
 
    background: #D1D1D1; 
 
    background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
    background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
    background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index: 0; 
 
    border-top-left-radius: 6px; 
 
    border-top-right-radius: 6px; 
 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; 
 
    text-shadow: 0 1px #FFF; 
 
    margin: 0 -5px; 
 
    padding: 0 20px; 
 
} 
 
.tabrow a { 
 
    color: #555; 
 
    text-decoration: none; 
 
} 
 
.tabrow li.selected { 
 
    background: #FFF; 
 
    color: #333; 
 
    z-index: 2; 
 
    border-bottom-color: #FFF; 
 
} 
 
.tabrow:before { 
 
    position: absolute; 
 
    content: " "; 
 
    width: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
    border-bottom: 1px solid #AAA; 
 
    z-index: 1; 
 
} 
 
.tabrow li:before, 
 
.tabrow li:after { 
 
    border: 1px solid #AAA; 
 
    position: absolute; 
 
    bottom: -1px; 
 
    width: 5px; 
 
    height: 5px; 
 
    content: " "; 
 
} 
 
.tabrow li:before { 
 
    left: -6px; 
 
    border-bottom-right-radius: 6px; 
 
    border-width: 0 1px 1px 0; 
 
    box-shadow: 2px 2px 0 #D1D1D1; 
 
} 
 
.tabrow li:after { 
 
    right: -6px; 
 
    border-bottom-left-radius: 6px; 
 
    border-width: 0 0 1px 1px; 
 
    box-shadow: -2px 2px 0 #D1D1D1; 
 
} 
 
.tabrow li.selected:before { 
 
    box-shadow: 2px 2px 0 #FFF; 
 
} 
 
.tabrow li.selected:after { 
 
    box-shadow: -2px 2px 0 #FFF; 
 
}

<ul class="tabrow"> 
 
    <li><a href="#">Lorem</a></li> 
 
    <li><a href="#">Ipsum</a></li> 
 
    <li class="selected"><a href="#">Sit amet</a></li> 
 
    <li><a href="#">Consectetur adipisicing</a></li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>