如果可以更改标签的形状,我可能会徘徊,最好是使用Jquery UI。
我希望有类似下面的标签。
或者有人可以通过css告诉我任何方法来实现这个目标吗?
答案 0 :(得分:1)
我已经使用了一些jquery来进行制表切换,但制表工具完全是用css完成的,这就是你要找的东西吗?
下面的片段或此jsfiddle
$('#tabwrapper ul li').on('click', function () {
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;
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
cursor: pointer;
}
li + li {
margin-left: 0;
}
li:after, li:before {
left: 100%;
top: 0%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 1;
}
li:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 13px;
margin-top: 0px;
}
li:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 14px;
margin-top: -1px;
z-index: 1;
}
li:hover {
background-color: #444;
color: #c2e1f5;
}
li:hover:after {
border-color: rgba(136, 183, 213, 0);
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>