<!
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 >
< title > 无标题页 </ title >
< script src ="js/jquery-1.2.3-intellisense.js" type ="text/javascript" ></ script >
< style type ="text/css" >
.menu{}{ margin:0; padding:0; border:0; width:300px;}
.menu div{}{ width:300px; height:200px; border-color:Red; border-style:solid; border-width:1px; color:Red; float:left; display:none }
.menu ul{}{ padding:0; margin:0; list-style-type:none; float:left;}
.menu li{}{ width:70px; border-width:1px 1px 0px 1px; border-color:Red; border-style:solid; float:left;height:28px; margin-right:2px; text-align:center; line-height:28px; font-weight:bold;}
</ style >
< script type ="text/javascript" language ="javascript" >
$(document).ready(function(){
$(".menu div:eq(0)").css("display","block")
$("li:eq(0)").css("background","#eee")
$("li").mouseover(function(index){
$("li").css("color","");
$(this).css("color","red")
var tex=$(this);
$(".menu div").css("dispaly","none");
for(k=0;k<$(".menu li").length;k++)
{
if($(".menu li:eq("+k+")").text()==tex.text())
{
$(".menu li").css("background","");
$(".menu li:eq("+k+")").css("background","#eee");
if(k<$(".menu div").length)
{
$(".menu div").css("display","none")
$(".menu div:eq("+k+")").css("display","block")
}
}
}
})
})
</ script >
</ head >
< body >
< div class ="menu" >
< ul >< li > 选项一 </ li >< li > 选项二 </ li >< li > 选项三 </ li >< li > 选项四 </ li ></ ul >
< div > 我是选项一 </ div >
< div > 我是选项二 </ div >
< div > 我是选项三 </ div >
</ div >
</ body >
</ html >
感觉jquery非常的方便,实现一些小功能很容易。
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< script src ="js/jquery-1.2.3-intellisense.js" type ="text/javascript" ></ script >
< style type ="text/css" >
.menu{}{ margin:0; padding:0; border:0; width:300px;}
.menu div{}{ width:300px; height:200px; border-color:Red; border-style:solid; border-width:1px; color:Red; float:left; display:none }
.menu ul{}{ padding:0; margin:0; list-style-type:none; float:left;}
.menu li{}{ width:70px; border-width:1px 1px 0px 1px; border-color:Red; border-style:solid; float:left;height:28px; margin-right:2px; text-align:center; line-height:28px; font-weight:bold;}
</ style >
< script type ="text/javascript" language ="javascript" >
$(document).ready(function(){
$(".menu div:eq(0)").css("display","block")
$("li:eq(0)").css("background","#eee")
$("li").mouseover(function(index){
$("li").css("color","");
$(this).css("color","red")
var tex=$(this);
$(".menu div").css("dispaly","none");
for(k=0;k<$(".menu li").length;k++)
{
if($(".menu li:eq("+k+")").text()==tex.text())
{
$(".menu li").css("background","");
$(".menu li:eq("+k+")").css("background","#eee");
if(k<$(".menu div").length)
{
$(".menu div").css("display","none")
$(".menu div:eq("+k+")").css("display","block")
}
}
}
})
})
</ script >
</ head >
< body >
< div class ="menu" >
< ul >< li > 选项一 </ li >< li > 选项二 </ li >< li > 选项三 </ li >< li > 选项四 </ li ></ ul >
< div > 我是选项一 </ div >
< div > 我是选项二 </ div >
< div > 我是选项三 </ div >
</ div >
</ body >
</ html >