选择风格关闭

实例：

代码：

/* css */
<article class="article-content">
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
#tabbox{ width:100%; overflow:hidden; margin:0 auto;}
#tabbox a{text-decoration: none;color: #000;font-size: 14px;}
.tab_conbox{border-top: none;}
.tab_con{ display:none;}
.tabs{height: 32px;border-bottom:1px solid #eee;border-left: 1px solid #eee;width: 100%;}
.tabs li{height:31px;line-height:31px;float:left;border:1px solid #eee;border-left:none;margin-bottom: -1px;background: #f7f7f7;overflow: hidden;position: relative;}
.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.tabs li a:hover {background: #eee;}	
.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #eee;}
.tab_con {padding:0px;font-size:14px;line-height:100%;}
</style>
/* js */
<script type="text/javascript">
$(document).ready(function() {
	jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
		$(tab_conbox).find("li").hide();
		$(tabtit).find("li:first").addClass("thistab").show(); 
		$(tab_conbox).find("li:first").show();
		$(tabtit).find("li").bind(shijian,function(){
		  $(this).addClass("thistab").siblings("li").removeClass("thistab"); 
			var activeindex = $(tabtit).find("li").index(this);
			$(tab_conbox).children().eq(activeindex).show().siblings().hide();
			return false;
		});
	};
	$.jqtab("#tabs","#tab_conbox","click");
});
</script>
/* html */
<div id="tabbox">
	<ul id="tabs" class="tabs">
		<li class="">
			<a href="#">BLOG</a> 
		</li>
		<li class="">
			<a href="#">个人简介</a> 
		</li>
		<li class="">
			<a href="#">测试</a> 
		</li>
	</ul>
	<ul id="tab_conbox" class="tab_conbox">
		<li class="tab_con" style="display:none;">
			<p align="center">
				<img src="https://hujinyuan.cn/content/uploadfile/tpl_options/logo2.jpg" /> 
			</p>
		</li>
		<li class="tab_con" style="display:list-item;">
			<p>
				其实也没什么好写的，只能简单介绍下
			</p>
			<p>
				网名：演员
			</p>
			<p>
				性别：男（纯属废话）
			</p>
			<p>
				年龄：18岁（永远18）
			</p>
			<p>
				所在地：中国
			</p>
			<p>
				感情状况：无
			</p>
			<p>
				文化水平：无
			</p>
			<p>
				工作情况：无业游民（暂时还没找到适合的工作）
			</p>
			<p>
				爱好：玩
			</p>
			<p>
				联系邮箱：admin@hujinyuan.cn&nbsp;&nbsp;联系QQ：1776588731
			</p>
			<p style="text-align:right;">
				2020年2月1日
			</p>
		</li>
		<li class="tab_con" style="display:none;">
			<p>
				测试
			</p>
		</li>
	</ul>
</div>
</article>