我有這樣的線框，我從工作：http://problemio.com/wireframe.pdf如何使鏈接看起來像使用HTML/CSS的標籤？
我試圖讓這念想的選項卡項目「正在進行的討論|建議的解決方案|解決方案的歷史......」地一下標籤，因爲他們都在線框。
到目前爲止，我可以使用JavaScript來顯示/隱藏正確的內容，但我不知道如何做的是強調激活的標籤，以及如何吸引周圍的標籤的行。
這裏是我到目前爲止的例子： http://www.problemio.com/problems/problem.php?problem_id=179
即使我做出的每個鏈接的div，我怎麼這些div的樣式之間切換？
謝謝！
你最簡單的選擇將是使用jQueryUI的標籤。這裏http://jqueryui.com/demos/tabs/
這是一個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>
檢查這篇文章出來：HTTP： //css-tricks.com/13758-functional-css-tabs-revisited/ –