新浪选项卡切换内容
来源：互联网 发布：java反射调用方法 编辑：程序博客网 时间：2024/04/30 10:59
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪选项卡切换</title>
<style type="text/css">
*{padding: 0px ;margin: 0px;}
ul,li{list-style: none}
a{color:#122E67;text-decoration: none;font-size: 12px}
a:hover{color:#FF8400;}
.box{width:380px;height:300px;margin: 40px auto;}
/*标题部分开始*/
.title{width:380px;height:35px;
line-height: 35px;overflow: hidden;
background: #F7F7F7;}
.title li{float:left;
width:60px;
font-size: 18px;
text-align: center;
color:#000;}
.tilte li a{color:#000;}
/*标题部分结束*/
/*内容样式开始*/
.content{width:380px;height:220px;
padding: 20px 0px;}
.content .pic{overflow: hidden;width:380px;height:70px;}
.content .pic li{margin-right:32px;position: relative;
float: left}
.content .pic .li3 {margin-right: 0px;}
.pic li div{position: absolute;
bottom: 5px;left:0px;
width: 105px;
color: #fff;
font-size: 12px;
text-align: center;
background: #000}
.pic li:hover div{color:#FF8400;}
/*列表开始*/
.list{width:380px;margin-top: 20px}
.list li{line-height: 25px;
background: url(images/doit.png) no-repeat 5px;
padding-left: 20px}
.list li span{width:18px;height:14px;
padding-left: 20px;
background: url(images/pic.png);display: line-block;
}
.pp{background: #fff;border-top: 1px solid #ff8400;height:34px;line-height: 34px}
.aa{background: #F7F7F7;border-top: noen;height:35px;line-height: 35px}
.content: {display: block;}
.content_in{display: none}
</style>
<script type="text/javascript">
function showa(index)
{
var arr=["tp","zl","rd"];
for(var i=0;i<arr.length;i++)
{
document.getElementById(arr[i]).className="aa";
document.getElementById("out_"+arr[i]).className="content_in";
}
document.getElementById(arr[index]).className="pp";
document.getElementById("out_"+arr[index]).className="content";
}
</script>
</head>
<body>
<div class="box">
<!-- 标题开始 -->
<div class="title">
<ul>
<li id="tp" class="pp" onmouseover="showa(0)"><a href="#">图片</a></li>
<li id="zl" class="aa" onmouseover="showa(1)"><a href="#">专栏</a></li>
<li id="rd" class="aa" onmouseover="showa(2)">热点</li>
</ul>
</div>
<!-- 标题结束 -->
<!-- 内容开始 -->
<div class="content " id="out_tp" >
<div class="pic">
<ul>
<li><a href="#">
<img src="images/sina1.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a>
</li>
<li><a href="#">
<img src="images/sina3.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
<li class="li3"><a href="#">
<img class="img3" src="images/sina4.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#"><span></span>夫妻卖房辞职带娃环游世界</a>
<a href="#"> 23名船员滞留印度60</a>
</li>
<li><a href="#"><span></span>他们相爱81年从未分开</a>
<a href="#"> 迷恋垃圾食品体重超600斤</a>
</li>
<li><a href="#"><span></span>刘亦菲仙气纱裙亮相时装周</a>
<a href="#"> 两大超模登封面拼美颜</a>
</li>
</ul>
</div>
</div>
<div class="content_in" id="out_zl" >
<div class="pic">
<ul>
<li><a href="#">
<img src="images/sina.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a>
</li>
<li><a href="#">
<img src="images/sina5.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
<li class="li3"><a href="#">
<img class="img3" src="images/sina6.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#"><span></span>全国人大记者会傅莹任发言人</a>
<a href="#"> 纽约人又送走了一段传奇</a>
</li>
<li><a href="#"><span></span>夫妻卖房辞职带娃环游世界</a>
<a href="#"> 23名船员滞留印度60</a>
</li>
<li><a href="#"><span></span>他们相爱81年从未分开</a>
<a href="#"> 迷恋垃圾食品体重超600斤</a>
</li>
<li><a href="#"><span></span>刘亦菲仙气纱裙亮相时装周</a>
<a href="#"> 两大超模登封面拼美颜</a>
</li>
</ul>
</div>
</div>
<div class="content_in" id="out_rd">
<div class="pic">
<ul>
<li><a href="#">
<img src="images/sina2.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a>
</li>
<li><a href="#">
<img src="images/sina7.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
<li class="li3"><a href="#">
<img class="img3" src="images/sina8.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#"><span></span>全国人大记者会傅莹任发言人</a>
<a href="#"> 纽约人又送走了一段传奇</a>
</li>
<li><a href="#"><span></span>夫妻卖房辞职带娃环游世界</a>
<a href="#"> 23名船员滞留印度60</a>
</li>
<li><a href="#"><span></span>他们相爱81年从未分开</a>
<a href="#"> 迷恋垃圾食品体重超600斤</a>
</li>
<li><a href="#"><span></span>刘亦菲仙气纱裙亮相时装周</a>
<a href="#"> 两大超模登封面拼美颜</a>
</li>
<li><a href="#"><span></span>全国人大记者会傅莹任发言人</a>
<a href="#"> 纽约人又送走了一段传奇</a>
</li>
</ul>
</div>
</div>
<!-- 内容结束 -->
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪选项卡切换</title>
<style type="text/css">
*{padding: 0px ;margin: 0px;}
ul,li{list-style: none}
a{color:#122E67;text-decoration: none;font-size: 12px}
a:hover{color:#FF8400;}
.box{width:380px;height:300px;margin: 40px auto;}
/*标题部分开始*/
.title{width:380px;height:35px;
line-height: 35px;overflow: hidden;
background: #F7F7F7;}
.title li{float:left;
width:60px;
font-size: 18px;
text-align: center;
color:#000;}
.tilte li a{color:#000;}
/*标题部分结束*/
/*内容样式开始*/
.content{width:380px;height:220px;
padding: 20px 0px;}
.content .pic{overflow: hidden;width:380px;height:70px;}
.content .pic li{margin-right:32px;position: relative;
float: left}
.content .pic .li3 {margin-right: 0px;}
.pic li div{position: absolute;
bottom: 5px;left:0px;
width: 105px;
color: #fff;
font-size: 12px;
text-align: center;
background: #000}
.pic li:hover div{color:#FF8400;}
/*列表开始*/
.list{width:380px;margin-top: 20px}
.list li{line-height: 25px;
background: url(images/doit.png) no-repeat 5px;
padding-left: 20px}
.list li span{width:18px;height:14px;
padding-left: 20px;
background: url(images/pic.png);display: line-block;
}
.pp{background: #fff;border-top: 1px solid #ff8400;height:34px;line-height: 34px}
.aa{background: #F7F7F7;border-top: noen;height:35px;line-height: 35px}
.content: {display: block;}
.content_in{display: none}
</style>
<script type="text/javascript">
function showa(index)
{
var arr=["tp","zl","rd"];
for(var i=0;i<arr.length;i++)
{
document.getElementById(arr[i]).className="aa";
document.getElementById("out_"+arr[i]).className="content_in";
}
document.getElementById(arr[index]).className="pp";
document.getElementById("out_"+arr[index]).className="content";
}
</script>
</head>
<body>
<div class="box">
<!-- 标题开始 -->
<div class="title">
<ul>
<li id="tp" class="pp" onmouseover="showa(0)"><a href="#">图片</a></li>
<li id="zl" class="aa" onmouseover="showa(1)"><a href="#">专栏</a></li>
<li id="rd" class="aa" onmouseover="showa(2)">热点</li>
</ul>
</div>
<!-- 标题结束 -->
<!-- 内容开始 -->
<div class="content " id="out_tp" >
<div class="pic">
<ul>
<li><a href="#">
<img src="images/sina1.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a>
</li>
<li><a href="#">
<img src="images/sina3.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
<li class="li3"><a href="#">
<img class="img3" src="images/sina4.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#"><span></span>夫妻卖房辞职带娃环游世界</a>
<a href="#"> 23名船员滞留印度60</a>
</li>
<li><a href="#"><span></span>他们相爱81年从未分开</a>
<a href="#"> 迷恋垃圾食品体重超600斤</a>
</li>
<li><a href="#"><span></span>刘亦菲仙气纱裙亮相时装周</a>
<a href="#"> 两大超模登封面拼美颜</a>
</li>
</ul>
</div>
</div>
<div class="content_in" id="out_zl" >
<div class="pic">
<ul>
<li><a href="#">
<img src="images/sina.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a>
</li>
<li><a href="#">
<img src="images/sina5.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
<li class="li3"><a href="#">
<img class="img3" src="images/sina6.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#"><span></span>全国人大记者会傅莹任发言人</a>
<a href="#"> 纽约人又送走了一段传奇</a>
</li>
<li><a href="#"><span></span>夫妻卖房辞职带娃环游世界</a>
<a href="#"> 23名船员滞留印度60</a>
</li>
<li><a href="#"><span></span>他们相爱81年从未分开</a>
<a href="#"> 迷恋垃圾食品体重超600斤</a>
</li>
<li><a href="#"><span></span>刘亦菲仙气纱裙亮相时装周</a>
<a href="#"> 两大超模登封面拼美颜</a>
</li>
</ul>
</div>
</div>
<div class="content_in" id="out_rd">
<div class="pic">
<ul>
<li><a href="#">
<img src="images/sina2.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a>
</li>
<li><a href="#">
<img src="images/sina7.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
<li class="li3"><a href="#">
<img class="img3" src="images/sina8.jpg" width="105" height="70">
<div>各路明星委员会</div>
</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#"><span></span>全国人大记者会傅莹任发言人</a>
<a href="#"> 纽约人又送走了一段传奇</a>
</li>
<li><a href="#"><span></span>夫妻卖房辞职带娃环游世界</a>
<a href="#"> 23名船员滞留印度60</a>
</li>
<li><a href="#"><span></span>他们相爱81年从未分开</a>
<a href="#"> 迷恋垃圾食品体重超600斤</a>
</li>
<li><a href="#"><span></span>刘亦菲仙气纱裙亮相时装周</a>
<a href="#"> 两大超模登封面拼美颜</a>
</li>
<li><a href="#"><span></span>全国人大记者会傅莹任发言人</a>
<a href="#"> 纽约人又送走了一段传奇</a>
</li>
</ul>
</div>
</div>
<!-- 内容结束 -->
</div>
</body>
</html>
0 0
- 新浪选项卡切换内容
- css内容切换选项卡
- 选项卡内容容器切换程序
- Jquery实现内容切换选项卡
- 新浪选项卡效果
- 纯CSS内页内容切换选项卡
- 选项卡(一)--纯CSS内页内容切换选项卡
- 一个选项卡切换
- javascript选项卡切换
- Jquery 选项卡切换
- 选项卡切换
- 选项卡切换
- 切换选项卡
- 选项卡切换
- jquery选项卡切换
- 选项卡切换
- js 选项卡切换
- 选项卡切换
- Arbitrage
- xUtils3中对Sqlite数据库的操作
- 欢迎使用CSDN-markdown编辑器
- 《Understanding the Linux kernel》学习笔记 Chapter 4: Interrupts and ExceptionsM
- 系统编程（文件输入输出）
- 新浪选项卡切换内容
- 面向对象的继承（拷贝继承）
- JavaScript入门
- 通过点击按钮-更换JPanel的背景图片
- Wormholes
- linux常用命令整理
- 免费建站教程
- 系统编程（数据库）
- swift 为方法追加代码
