您的位置：首页 > Web前端 > JQuery

jquery + css 实现菜单选项卡

2011-01-04 19:04 417 查看
效果图：



当鼠标移动到路线查询、站点查询或者站点换乘时，底下方框的内容会跟着变化.

html代码如下：

<!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=utf-8" />
<title>头</title>
<!--
<link rel="stylesheet" href="css/result.css" mce_href="css/result.css" />
-->
<mce:script src="js/jquery-1.4.js" mce_src="js/jquery-1.4.js"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
$("#stop_search").hide();
$("#route_stop_search").hide();
$("#tab_one").css({"font-size":"14px","font-weight":"bold"});
});
function goTo(index) {
if (index == 1) {
$("#route_search").show();
$("#stop_search").hide();
$("#route_stop_search").hide();
$("#tab_one").css({"font-size":"14px","font-weight":"bold"});
$("#tab_two").css({"font-size":"16px","font-weight":"normal"});
$("#tab_three").css({"font-size":"16px","font-weight":"normal"});
}
if (index == 2) {
$("#stop_search").show();
$("#route_search").hide();
$("#route_stop_search").hide();
$("#tab_two").css({"font-size":"14px","font-weight":"bold"});
$("#tab_one").css({"font-size":"16px","font-weight":"normal"});
$("#tab_three").css({"font-size":"16px","font-weight":"normal"});

}
if (index == 3) {
$("#route_stop_search").show();
$("#route_search").hide();
$("#stop_search").hide();
$("#tab_three").css({"font-size":"14px","font-weight":"bold"});
$("#tab_one").css({"font-size":"16px","font-weight":"normal"});
$("#tab_two").css({"font-size":"16px","font-weight":"normal"});

}
}
// --></mce:script>
<mce:style type="text/css"><!--
/* CSS Document */
#header{ display:block; height:30px; border-bottom:2px solid #CCC; padding-bottom:20px;}
#search{height:80px;width:400px; float:left; display:block;}
ul,li{ padding:0; margin:0;}
#search_tab{
background:url("../images/tab2.jpg") no-repeat;
width:100%;
height:30px;
display:block;}
#search_tab ul,#search_tab li{ list-style:none;}
#search_tab li{float:left;display:block;line-height:20px;padding:5px 10px;width:65px;color:#fff;	/*background-color:#76cee4;*/}

#search_content{width:100%;	display:block;}

.formA{	padding:10px 0 10px 20px;height:30px;color:gray;}
#route_search,#stop_search,#route_stop_search{border-right:1px solid #76cee4;border-left:1px solid #76cee4;border-bottom:1px solid #76cee4;}
#title{ /*margin-left:500px;*/margin:0 auto; margin-top:20px; height:60px; width:300px; background:url(../images/title.jpg) no-repeat;}
--></mce:style><style type="text/css" mce_bogus="1">/* CSS Document */
#header{ display:block; height:30px; border-bottom:2px solid #CCC; padding-bottom:20px;}
#search{height:80px;width:400px; float:left; display:block;}
ul,li{ padding:0; margin:0;}
#search_tab{
background:url("../images/tab2.jpg") no-repeat;
width:100%;
height:30px;
display:block;}
#search_tab ul,#search_tab li{ list-style:none;}
#search_tab li{float:left;display:block;line-height:20px;padding:5px 10px;width:65px;color:#fff;	/*background-color:#76cee4;*/}

#search_content{width:100%;	display:block;}

.formA{	padding:10px 0 10px 20px;height:30px;color:gray;}
#route_search,#stop_search,#route_stop_search{border-right:1px solid #76cee4;border-left:1px solid #76cee4;border-bottom:1px solid #76cee4;}
#title{ /*margin-left:500px;*/margin:0 auto; margin-top:20px; height:60px; width:300px; background:url(../images/title.jpg) no-repeat;}</style>
</head>
<body>
<div id="header">
<div id="onerow">
<div id="title">
</div>
<div id="search">
<div id="search_tab">
<ul>
<li id="tab_one" onMouseOver="javascript:goTo(1)">路线查询</li>
<li id="tab_two" onMouseOver="javascript:goTo(2)">站点查询</li>
<li id="tab_three" onMouseOver="javascript:goTo(3)">站点换乘</li>
</ul>
</div><!--end #search_tab -->
<div id="search_content" >
<div id="route_search">
<form class="formA" method="get" action="getRoutes.php">
<label>路线名称:
<input type="text" name="route" />
</label>
<input type="submit" value="路线搜索" /></form>
</div><!--end #route_search -->
<div id="stop_search">
<form class="formA" method="get" action="getStops.php">
<label>站点名称:
<input type="text" name="stopName" />
</label>
<input type="submit" value="站点搜索" /></form>
</div><!--end #stop_search -->
<div id="route_stop_search">
<form class="formA" method="get" action="getStop.php">
<label>起点:
<input type="text" name="stopName" size="8" />
</label>
<label>终点:
<input type="text" name="stopName" size="8"/>
</label>
<input type="submit" value="站点换乘" /></form>
</div><!--end #route_stop_search -->
</div><!--end #search_content -->
</div><!--end #search -->
</div><!--end #onerow -->
</div>
<!-- end #header -->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航