做的比较丑
<!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=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function showFocus(obj,tabid)
{
var objdiv=obj.parentNode.parentNode;
for(var i=1;i<objdiv.childNodes.length;i++)
{
objdiv.childNodes[i].style.display="none";
objdiv.childNodes[0].childNodes[i-1].className="";
}
objdiv.childNodes[tabid].style.display="block";
obj.className="treeitem1";
}
</script>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
.focusflash ul {
list-style-type: none;
width: 120px;
float: left;
background-color:#CCCCCC
}
.focusflash ul .treeitem1 {
width: 120px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #669900;
border-right-color: #FFFFFF;
border-bottom-color: #669900;
border-left-color: #669900;
background-color:#FFFFFF;
}
.focusflash ul li {
width: 104px;
border: 1px solid #669900;
padding-left:0px;
background-color:#99FFFF;
margin-top:5px;
margin-bottom:5px;
padding-top:2px;
padding-bottom:2px;
}
.focusflash .treecontent {
border: 1px solid #00FFFF;
float:right;
width:600px;
height:100%;
display:none;
}
-->
</style>
</head>
<body>
<div id="focus" style="border:#00FF00 1px solid;width:750px;" class="focusflash">
<ul>
<LI class="treeitem1" onclick="showFocus(this,1);">社 会 </LI>
<LI onclick="showFocus(this,2);">国 内</LI>
<LI onclick="showFocus(this,3);">国 际</LI>
<LI onclick="showFocus(this,4);">军 事</LI>
<LI onclick="showFocus(this,5);">明 星</LI>
<LI onclick="showFocus(this,6);">美 女</LI>
<LI onclick="showFocus(this,7);">体 坛</LI>
</ul>
<div class="treecontent" style="display:block;"> <img src="1.gif" />
<p>新闻标题1</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题2</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题3</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题4</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题5</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题6</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题7</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function showFocus(obj,tabid)
{
var objdiv=obj.parentNode.parentNode;
for(var i=1;i<objdiv.childNodes.length;i++)
{
objdiv.childNodes[i].style.display="none";
objdiv.childNodes[0].childNodes[i-1].className="";
}
objdiv.childNodes[tabid].style.display="block";
obj.className="treeitem1";
}
</script>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
.focusflash ul {
list-style-type: none;
width: 120px;
float: left;
background-color:#CCCCCC
}
.focusflash ul .treeitem1 {
width: 120px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #669900;
border-right-color: #FFFFFF;
border-bottom-color: #669900;
border-left-color: #669900;
background-color:#FFFFFF;
}
.focusflash ul li {
width: 104px;
border: 1px solid #669900;
padding-left:0px;
background-color:#99FFFF;
margin-top:5px;
margin-bottom:5px;
padding-top:2px;
padding-bottom:2px;
}
.focusflash .treecontent {
border: 1px solid #00FFFF;
float:right;
width:600px;
height:100%;
display:none;
}
-->
</style>
</head>
<body>
<div id="focus" style="border:#00FF00 1px solid;width:750px;" class="focusflash">
<ul>
<LI class="treeitem1" onclick="showFocus(this,1);">社 会 </LI>
<LI onclick="showFocus(this,2);">国 内</LI>
<LI onclick="showFocus(this,3);">国 际</LI>
<LI onclick="showFocus(this,4);">军 事</LI>
<LI onclick="showFocus(this,5);">明 星</LI>
<LI onclick="showFocus(this,6);">美 女</LI>
<LI onclick="showFocus(this,7);">体 坛</LI>
</ul>
<div class="treecontent" style="display:block;"> <img src="1.gif" />
<p>新闻标题1</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题2</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题3</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题4</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题5</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题6</p>
</div>
<div class="treecontent"> <img src="1.gif" />
<p>新闻标题7</p>
</div>
</div>
</body>
</html>