<!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 页模仿的更多相关文章

  1. Python爬虫：新浪新闻详情页的数据抓取（函数版）

    上一篇文章<Python爬虫:抓取新浪新闻数据>详细解说了如何抓取新浪新闻详情页的相关数据,但代码的构建不利于后续扩展,每次抓取新的详情页时都需要重新写一遍,因此,我们需要将其整理成函数, ...

  2. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

  3. 仿新浪首页、主题、详情页，纯html静态页面

    仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535

  4. CefSharp禁止弹出新窗体，在同一窗口打开链接，或者在新Tab页打开链接，并且支持带type="POST" target="_blank"的链接

    说明:在同一窗口打开链接,只要稍加改造就可以实现,这里实现的是在新Tab页打开链接,并且支持带type="POST" target="_blank"的链接 gi ...

  5. 使“Cmder Here”菜单在Tab页开新窗口

    Cmder是一个非常好用的的控制台命令行,我们在实际使用的时候,经常通过如下指令将其注册到右键菜单: Cmder.exe /REGISTER ALL 这样就可以在任意文件夹下快速打开Cmder,并且能 ...

  6. 用java实现新浪爬虫,代码完整剖析(仅针对当前SinaSignOn有效)

    先来看我们的web.xml文件,如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...

  7. 使用JAVA实现模拟登陆并发送新浪微博（非调用新浪API）

    没有调用新浪的API,在程序中加入自己的帐号和密码就能发送微博,代码完全在后台运行,不用打开浏览器. 用了HtmlUnit这个库来模拟登录还有发送微博. 先上效果图: 这个是刚登陆上获取第一页的信息. ...

  8. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  9. python网络爬虫 新浪博客篇

    上次写了一个爬世纪佳缘的爬虫之后,今天再接再厉又写了一个新浪博客的爬虫.写完之后,我想了一会儿,要不要在博客园里面写个帖子记录一下,因为我觉得这份代码的含金量确实太低,有点炒冷饭的嫌疑,就是把上次的代 ...

随机推荐

  1. Spring+SpringMVC+MyBatis整合教程

    1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One  ...

  2. [JLOI2015]战争调度

    [JLOI2015]战争调度 题目 解题报告 考试打了个枚举的暴力,骗了20= = $qsy$大佬的$DP$: 其实就是枚举= =,只不过枚举的比较强= = #include<iostream& ...

  3. [ZJOI2010]Perm

    [ZJOI2010]Perm 题目 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少 ...

  4. noip模拟赛 楼

    分析:题目可以转化为对于一个数,对它进行x次减法操作,n-x次加法操作,使他变成最小的非负整数.因为每减一次数就会减小,次数是一定的,所以可以二分x,就可以了. #include <cstdio ...

  5. hdu 4941 stl的map<node,int>用法

    #include<iostream> #include<cstdio> #include<cstring> #include<map> using na ...

  6. group by语句，聚合函数与其他语句（关系，执行过程）

    (本文一切基于SQL SERVER 2008 R2) 先来看一个语句执行过程发生的错误提示: 消息 8120,级别 16,状态 1,第 2 行 选择列表中的列 'SC.CNO' 无效,因为该列没有包含 ...

  7. Square words（codevs 3301）

    题目描述 Description 定义square words为: 1.长度为偶数. 2.前一半等于后一半. 比如abcabc和aaaa都是square words,但是abcabcab和aaaaa都 ...

  8. 关于Linux的本地回环路由lo [127.0.0.1 ]

    最近 打算配开发板的socket通讯,打印环境变量发现却没有 127.0.0.1 / # ifconfig -a eth0 Link encap:Ethernet HWaddr 86:43:C9:A1 ...

  9. Android实战简易教程-第二十四枪（基于Baas的用户表查询功能实现！）

    接着上一篇,我们注冊了几个用户,用户表例如以下: 以下我们用ListView将表中数据显示出来吧. 首先看一下main.xml: <RelativeLayout xmlns:android=&q ...

  10. 使用Memcached改进Java企业级应用性能：架构和设置

    Memcached由Danga Interactive开发.用来提升LiveJournal.com站点性能. Memcached分布式架构支持众多的社交网络应用,Twitter.Facebook还有W ...