新浪某个tab 页模仿

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

	*{

		margin: 0;

		padding: 0;

	}

	#div0{

    width:520px;

	margin-top: 50px;

	margin-left: 50px;

	}

.div1{

	 height:34px;

	 line-height:34px;

	 border: 1px solid #dbdee1;

	 background: url(http://i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png) 0 -33px repeat-x;

	 border-left:0px;

}

.div1_1>span{

        float:left;

        height: 33px;

		font-size:16px;

		font-family:"Microsoft YaHei","微软雅黑";

		padding:0 13px;

        border-left:1px solid #dbdee1;

		border-right:1px solid #dbdee1;

	}

	.spselect{

		line-height:28px;

		border-top:3px solid #ff8400;

		background-color:#fff;

		margin-bottom:-1px;

		padding:0 12px;

	}

	.divselect{

		display: block;

	}

	.divnoselect{

		display: none;

	}

    .time{

        float:right;

        padding-right:10px;

    }

    .div2 div{

        height:100px;

    }

    .div2 div li{

        padding-left: 10px;

        list-style:none;

        background: url(http://i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;

        overflow: hidden;

        line-height: 26px;

    }

	a:hover{

		 color: #ff8400;

	}

    .div2 a:hover {

        text-decoration: underline;

    }

</style>

<script src="jquery-3.2.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        var divs = $("#div2>div");

        $("#div1_1>span").mouseover(function () { //鼠标事件

            //$(this).addClass("spselect");//添加类在当前对象

            var index = $(this).index(); //$(this).index()代表当前对象索引

            //eq()函数用于获取当前jQuery对象所匹配的元素中指定索引的元素，

            $(this).addClass("spselect").siblings().removeClass();//添加类在当前对象 移除同级元素类

            divs.hide().eq($('#div1_1>span').index(this)).show();

        });

        $("#div1_1>span").mouseout(function () {

            $(this).removeClass("spselect");

        });

    });

</script>

</head>

<body>

<!--大div内容和标题区-->

<div id="div0">

	<div class="div1">

	   <div class="div1_1" id="div1_1">

		<span class="sp spselect"><a>新闻</a></span>

		<span class="sp"><a class="a2">看河南</a></span>

		<span class="sp"><a>看世界</a></span>

	   </div>

        <span class="time">2017.10.16</span>

    </div>

    <div style="height:20px"></div>

	<div class="div2" id="div2">

        <div class="divselect">

        <ul>

            <li><a>xxx主持中共中央党外人士座谈会</a></li>

            <li><a>“我们的自信”文化篇——中华之魂</a></li>

            <li><a>十八次党代会十八座里程碑 解决了啥难题</a></li>

        </ul>

        </div>

        <div class="divnoselect">

            <ul>

                <li><a>河南本周最低气温降至7℃ 周三前多阴雨天气</a></li>

                <li><a>“五星级”菜市场亮相郑州 投资800万装修豪华(组图)</a></li>

                <li><a>河南构建全产业链现代物流强省 三年转型发展规划出台</a></li>

            </ul>

        </div>

        <div class="divnoselect">内容3</div>

    </div>

</div>

</body>

</html>
巴特西

新浪某个tab 页模仿

最新文章

热门文章
