Jquery UI 选项卡 - 更改选项卡的形状

Question

您好，我正在考虑是否可以更改选项卡的形状，最好使用 Jquery UI。

我想要类似于下面标签的内容。

或者有人可以建议我使用 css 实现此目的的任何方法吗？

Answer 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>