jquery + css 实现菜单选项卡

最新推荐文章于 2024-09-08 09:38:17 发布

原创最新推荐文章于 2024-09-08 09:38:17 发布 · 3.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #jquery #search #input #javascript

jquery 同时被 3 个专栏收录

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

这篇博客展示了如何结合jQuery和CSS实现一个动态的菜单选项卡效果。当鼠标悬停在‘路线查询’、‘站点查询’或‘站点换乘’上时，对应的查询表单会在下方显示。HTML结构、jQuery函数以及CSS样式被详细地用于创建这个功能。

效果图：

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

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>  <mce:script src="js/jquery-1.4.js" mce_src="js/jquery-1.4.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></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> <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> <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> <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> </div> </div> </div> </div>  </body> </html>