JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div class="h_list_container clearfix">
    <ul class="h_list">
		<li class="active">水平TAB1</li>
		<li class="">水平TAB2</li>
        <li class="">水平TAB3</li>
        <li class="">水平TAB4</li>
        <li class="">水平TAB5</li>
    </ul>
</div>
<div class="h_content">
		<div class="clearfix active">
			<ul class="v_list">
				<li class="active">垂直TAB1</li>
				<li class="">垂直TAB2</li>
				<li class="">垂直TAB3</li>
			</ul>
			<ul class="v_content">
				<li class="active">垂直TAB1-Content</li>
				<li class="">垂直TAB2-Content</li>
				<li class="">垂直TAB3-Content</li>
			</ul>
		</div>
		<div class="">
            <p>水平TAB2-Content</p>
		</div>
        <div class=""><p>水平TAB3-Content</p></div>
        <div class=""><p>水平TAB4-Content</p></div>
        <div class=""><p>水平TAB5-Content</p></div>
</div>

CSS

* {margin:0; padding:0;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
ul,li {list-style:none;}
img {border:0;}
.h_list_container {}
.h_list li {float:left; width:188px; height:62px;line-height:62px; text-align:center; background:#000; color:#fff; cursor:pointer; font-weight:normal;background: url(http://localhost:8080/ken/templets/default/images/tab.png) no-repeat;}
.h_list li.active {background:#fff; color:#000; font-weight:bold;background: url(http://localhost:8080/ken/templets/default/images/tab.png) no-repeat -188px;}
.h_content {}
.h_content div {display:none; padding:0px; background:#fff;}
.h_content div.active {display:block;width:940px;height:397px;text-align:center;padding:0;background:green;}
 
.v_list {float:left; width:188px;height:397px;background:yellow;}
.v_list li {height:50px; line-height:50px; text-align:center; margin-bottom:0px; background:#333; color:#fff; cursor:pointer;}
.v_list li.active {background:#eee; color:#333; font-weight:bold;}
.v_content {float:left; width:752px;}
.v_content li {display:none; height:397px; padding:10px; background:#eee;}
.v_content li.active {display:block;}

JavaScript

$(document).ready(function() {
	$(".h_list li").click(function() {
		$(this).addClass("active");
		$(this).siblings().removeClass("active");
		var $selected = $(".h_content > div").eq($(".h_list li").index(this));
		$selected.addClass("active");
		$selected.siblings().removeClass("active");
	});
	$(".v_list li").click(function() {
		$(this).addClass("active");
		$(this).siblings().removeClass("active");
		var $selected = $(".v_content li").eq($(".v_list li").index(this));
		$selected.addClass("active");
		$selected.siblings().removeClass("active");
	});
});