jquery如何实现tab菜单切换效果？（代码示例）

jquery如何实现tab菜单切换效果？下面本篇文章就来给大家通过示例来介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

首先我们来看看效果图：

【相关教程推荐：JQuery教程】

下面我们来看看完整的示例的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery实现tab菜单切换内容（精简版）</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- 这是菜单 -->
<div>
<span style="background-color: red;cursor: pointer;" list="0" onclick="tab(this)">
我是A
</span>
<span style="background-color: blue;cursor: pointer;" list="1" onclick="tab(this)">
我是B
</span>
<span style="background-color: orange;cursor: pointer;" list="2" onclick="tab(this)">
我是C
</span>
<span style="background-color: green;cursor: pointer;" list="3" onclick="tab(this)">
我是D
</span>
</div>
<!-- 这是菜单对应的内容 -->
<div class="content">
<div style="background-color: red" onclick="cont(this)">我是A的内容</div>
<div style="background-color: blue;display: none" onclick="cont(this)">我是B的内容</div>
<div style="background-color: orange;display: none" onclick="cont(this)">我是C的内容</div>
<div style="background-color: green;display: none" onclick="cont(this)">我是D的内容</div>
</div>
</body>
<script type="text/javascript">
//点击菜单执行函数
function tab(param) {
	var sp_an = $(param).attr('list'); //获取被点击菜单的list属性值（0,1,2,3）
	
	//点击菜单后，对应的内容被点击，从而实现展示
	$('.content').children('div').eq(sp_an).click();
	//使用click()方法模拟点击事件，触发下面的cont函数
}
//这个函数的触发是通过点击菜单的时候触发的
function cont(param) {
	$(param).show(); //被选中的内容显示
	$(param).siblings().hide(); //没有被选中的内容隐藏
}
</script>
</html>

重点总结：