如何使用html / css使鏈接看起來像標簽？

Question

我有正在使用的線框： http : //problemio.com/wireframe.pdf

我正在嘗試使選項卡式項目看起來像“正在進行的討論|建議的解決方案|解決方案歷史...”，就像它們在線框上一樣看起來是選項卡式的。

到目前為止，我已經能夠使用JavaScript顯示/隱藏正確的元素，但是我不確定該怎么做是突出顯示活動的選項卡以及如何在選項卡周圍繪制線條。

這是到目前為止我所擁有的示例： http : //www.problemio.com/problems/problem.php?problem_id=179

即使我將每個鏈接都設為一個div，如何在這些div的樣式之間切換？

謝謝！！

Answer 1

如果您已經可以顯示和隱藏，並且正在尋找非jQuery選項，則可以嘗試如下操作：

http://jsfiddle.net/wqEdj/

這是直錨元素的基本樣式。

Answer 2

最簡單的選擇就是使用jQueryUI Tabs。 此處示例http://jqueryui.com/demos/tabs/

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>