jquery列表选项卡切换

浏览数：45 / 时间：2015年06月09日

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery列表选项卡切换</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jQuery182min.js"></script>
<script type="text/javascript">        
window.onload=function() {
    $(".jiaru1_zc li").each(function(index) { 
        //each对参数一提供的对象的中所有的子元素逐一进行方法调用
        $(this).click(function() { 
            $(".jiaru1_zc li.visited").removeClass("visited"); 
            $(this).addClass("visited"); 
            $(".jiaru2_zc ul:eq(" + index + ")").show()
            .siblings().hide();
        });
    });
    $(".jiaru2_zc li").each(function() {
        $(this).click(function(){                
            $(this).find("p").toggle("fast");
            })
    });
};
</script>
    
</head>

<body>
<div class="jiaru_zc">
    <div class="jiaru1_zc">
        <ul>
            <li class="visited"><span>标题11</span></li>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
         </ul>
         <ul>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
            <li><span>标题11</span></li>
        </ul>
    </div>
    <div class="jiaru2_zc">
        <div class="bd">
            <ul style="display:block;">
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
            <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>                
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>                
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>            
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
            <ul>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍 </p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
                <li><span>小标题11</span>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                    <p>详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍</p>
                </li>
            </ul>
         </div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

 

css:

@charset "utf-8";
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";line-height:150%;background:#ecc2a4;}
ul,li{list-style:none;}
a{text-decoration:none;}

.jiaru_zc{width:770px;margin:20px auto;}

/* jiaru1_zc */
.jiaru1_zc{width:630px;float:left;padding:15px 0 10px 140px;}
.jiaru1_zc ul{width:100%;float:left;}
.jiaru1_zc ul li{min-width:50px;height:28px;float:left;cursor:pointer;text-align:center;line-height:19px;margin:0 25px 5px 0;padding:0 0 0 8px;}
.jiaru1_zc ul li span{float:left;height:28px;color:#895630;font-weight:bold;padding:0 12px 0 0;}
.jiaru1_zc ul .visited span{color:#311c07;}
.jiaru2_zc{width:560px;height:274px;float:left;padding:55px 0 0 120px;background:url(../images/us_07.png) no-repeat center ;margin:11px 0 0 0;}
.bd{width:420px;height:210px;padding-right:20px;float:left;overflow:hidden;overflow-y:auto;}
.jiaru2_zc ul{width:420px;float:left;display:none;}
.jiaru2_zc ul li{width:415px;float:left;padding:0 0 0 5px;border-bottom:1px dotted #371909;line-height:25px;}
.jiaru2_zc ul li span{width:100%;float:left;cursor:pointer;color:#371909;font-weight:bold;}
.jiaru2_zc ul li p{display:none;width:100%;float:left;margin:0 0 5px 0;line-height:18px;}

 

js:    jQuery

demo:

jquery列表选项卡切换,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： http it color class java html 代码 blog oc la 表 http it color class java html 代码 blog oc la 表

相关文章

随机文章

您可能还喜欢

您可能还喜欢