                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Tab選項(xiàng)卡切換效果

另外一種JQ效果

<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}

.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}

.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript">

</script>
</head>
<body>
<script> ? ?
? ? $(function(){
? ? ? ? var p=$("p");
? ? ? ? var ul=$("ul");
? ? ? ?
? ? ? ? p.each(function(i){
? ? ? ? ? ? p[i].id=1;
? ? ? ? ? ? p[0].id=0
? ? ? ? ? ? $(p[i]).click(function(){
? ? ? ? ? ? ? ? if(this.id==1){
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? $(this).next().slideDown();
? ? ? ? ? ? ? ? ? ? this.id=0
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{$(this).next().slideUp()
? ? ? ? ? ? ? ? ? ? this.id=1}
? ? ? ? ? ? })
? ? ? ? })
? ? })
? ??
? ??
? ??
? ??
</script>
<div id="menu">
<div>
<p>Web前端</p>
<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>