tab套tab

最新推荐文章于 2022-01-04 16:23:23 发布

今子小姐

最新推荐文章于 2022-01-04 16:23:23 发布

阅读量416

点赞数 2

本文链接：https://blog.csdn.net/qq_26279313/article/details/79051305

版权

js效果图

代码部分

<!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>自己写的js</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
<!--tab套tab-->
$(function(){
		$(".title li:first").addClass("new");
		$(".info:first").show().siblings().hide();
		$(".inContent div:first").show().siblings().hide();
		$(".title li").click(function(){
			$(this).addClass("new").siblings().removeClass("new");
			$(".info").eq($(".title li").index(this)).show().siblings().hide();
			$(".inContent div:first-child").show().siblings().hide();
			});
		$(".info li").mouseover(function(){
			$(this).addClass("new_1").siblings().removeClass("new_1")
			$(".inContent div").eq($(".info li").index(this)).show().siblings().hide();
			});
	})
		<!--tab套tab-->
</script>
<style>
body, ul, li, div, a {
	margin: 0px;
	padding: 0px;
	color:#999
}
ul{list-style: none;}
.left{ float:left;}
.right{ float:right;}
.clear{ clear:both;}
.clearfix:after {visibility: hidden; display: block; clear: both; height: 0; font-size: 0; content: ".";}
.clearfix{zoom:1;}

.box {width:960px;margin:40px auto;background:#eff3f5;overflow:hidden;padding:40px 0px;}
/*tab里套tab*/
.tab{width:504px; margin:0 auto;border: 1px solid #6391FF;}
.title ul li { float:left;width:100px;border-top:5px solid #6391FF;border-right:1px solid #09c;border-bottom: 1px solid #6391FF;color:#666;text-align:center;line-height:40px;cursor:pointer;}
.title ul li:last-child{border-right:0px;}
.clear{clear:both;}
.content .info .new_1{ background:#e3f1f8; color:#fff; color:#000;}
.content{ background:#fff;}
.info ul{ width:103px; float:left;}
.info ul li{color:#999;text-align:center;line-height:40px;}
.info .inContent{ float:left; text-align:left;padding-top:10px;width:381px;line-height:40px; height:110px; overflow:hidden;padding-left:20px; display:inline; background:#e1edf3;}
.title ul li.new{border-bottom:1px; background:#6391FF;color:#fff;}
/*tab里套tab*/

</style>
</head>

<body>
	<div class="box ">
   		 <!--tab里套tab-->
    	<div class="tab clearfix">
            <div class="title clearfix">
                <ul>
                    <li>标题1</li>
                    <li>标题2</li>
                    <li>标题3</li>
                    <li>标题4</li>
                    <li>标题5</li>
                </ul>
            </div>
            <div class="content clear clearfix">
                <div class="info">
                    <ul>
                        <li class="new_1">标题1a</li>
                        <li>标题1b</li>
                        <li>标题1c</li>
                    </ul>
                    <div class="inContent">
                        <div>标题1a里的文本aaaa</div>
                        <div>标题1b里的文本bbbb</div>
                        <div>标题1c里的文本cccc</div>
                    </div>
                </div>
                <div class="info">
                    <ul>
                        <li  class="new_1">标题2a</li>
                        <li>标题2b</li>
                        <li>标题2c</li>
                    </ul>
                    <div class="inContent">
                        <div>标题2a里的文本aaaa</div>
                        <div>标题2b里的文本bbbb</div>
                        <div>标题2c里的文本cccc</div>
                    </div>
                </div>
                <div class="info">
                    <ul>
                        <li  class="new_1">标题3a</li>
                        <li>标题3b</li>
                        <li>标题3c</li>
                    </ul>
                    <div class="inContent">
                        <div>标题3a里的文本aaaa</div>
                        <div>标题3b里的文本bbbb</div>
                        <div>标题3c里的文本cccc</div>
                    </div>
                </div>
                <div class="info">
                    <ul>
                        <li  class="new_1">标题4a</li>
                        <li>标题4b</li>
                        <li>标题4c</li>
                    </ul>
                    <div class="inContent">
                        <div>标题4a里的文本aaaa</div>
                        <div>标题4b里的文本bbbb</div>
                        <div>标题4c里的文本cccc</div>
                    </div>
                </div>
                <div class="info">
                    <ul>
                        <li  class="new_1">标题5a</li>
                        <li>标题5b</li>
                        <li>标题5c</li>
                    </ul>
                    <div class="inContent">
                        <div>标题5a里的文本aaaa</div>
                        <div>标题5b里的文本bbbb</div>
                        <div>标题5c里的文本cccc</div>
                    </div>
                </div>
            </div>
        </div>
        <!--tab里套tab-->
    </div>
   
</body>
</html>

今子小姐

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab套tab

js效果图代码部分html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>自己写的jstitle>link rel="stylesheet" type="text/css" href="m
复制链接

扫一扫