用div+css代替iframe

html-css025

用div+css代替iframe,第1张

<!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/htmlcharset=utf-8" />

<title>鼠标点击左侧，右侧显示内容</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function (){

$("#newsTab a").each(function(index){//each变例，每一个a标签

$(this).click(function(){//鼠标滑过a的时候

$(".news").addClass("dis")//给news添加样式dis

$(".news:eq("+index+")").removeClass("dis")//给对应news的index索引值删除dis样式

$("#newsTab a").removeClass("hover")//先删除所有的a的样式hover

$(this).addClass("hover")//给对应的a添加样式hover

})

})

})

</script>

<style type="text/css">

*{padding:0margin:0}

li{ list-style-type:none}

.box{ width:1000pxheight:500pxborder:1px solid #333margin:0 auto}

#newsTab{width:200pxheight:500pxborder-right:1px solid #333float:left}

#newsTab li{ width:200px}

#newsTab a{ width:200pxheight:28pxline-height:28pxtext-decoration:nonecolor:#fffbackground:#cccborder-bottom:1px solid #777display:inline-blocktext-align:center}

.news{width:799pxheight:500pxbackground:#cccfloat:left}

.dis{display:none}

#newsTab .hover{background:redfont-weight:600}

</style>

</head>

<body>

<div class="box">

<ul id="newsTab">

<li><a href="#" class="hover">国内新闻</a></li>

<li><a href="#">娱乐新闻</a></li>

<li><a href="#">体育新闻</a></li>

</ul>

<ul class="news" >

<li>国内昨天下公交车的时候，捡到5块，回到家发现公交卡丢（刚充了100）</li>

</ul>

<ul class="news dis">

<li>早上被雨淋了</li>

</ul>

<ul class="news dis">

<li>北京3-1领先广东队</li>

</ul>

</div>

</body>

</html>

原码是这样的。

在CSS定义：

A.a06:link{color:#0b0096}

A.a06:visited {color:#800080}

A.a06:active,A.a06:hover {color:#ff0000}

然后在页面的连接码里，加上：

<a ...... class=a06>......</a>就可以了。