【Z先生原创】10行代码实现选项卡

先扔代码，记得先引入JQ库

function xcwltabs(title, content, isclick) {
	var titleobj = title + " .tabs-menu";
	var textobj = content + " .tabs-item";

	var act = isclick == 1 ? "click" : "mouseenter";

	$(document).on(act, titleobj, function () {
		var _index = $(this).index();
		$(titleobj).removeClass("hover").eq(_index).addClass("hover");
		$(textobj).hide().eq(_index).fadeIn();
	});

}

HTML结构

<ul id="tabs-menu">
    <li class="tabs-menu hover">项目一标题</li>
    <li class="tabs-menu">项目二标题</li>
    <li class="tabs-menu">项目三标题</li>
    <li class="tabs-menu">项目四标题</li>
</ul>
<div id="tabs-cont">
    <div class="tabs-cont">
        项目一内容
    </div>
    <div class="tabs-cont" style="display:none;">
        项目二内容
    </div>
    <div class="tabs-cont" style="display:none;">
        项目三内容
    </div>
    <div class="tabs-cont" style="display:none;">
        项目四内容
    </div>
</div>

Javascript脚本：

xcwltabs("#tabs-menu","#tabs-cont",1);

当然，不要忘记了标题上的高亮“.hover”的样式，这个自己写吧。。