首先我们放置三个菜单按钮及对应的搜索框。
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<div class="searchbox">
<ul id="ul_menus">
<li><a href="#" class="style_1">宝贝</a></li>
<li><a href="#">天猫</a></li>
<li><a href="#">店铺</a></li>
</ul>
<div class="search_area" id="search_area">
<p style="display: block"><input type="text" value="" id="" class="input_1" placeholder="输入宝贝" /><button class="button_search_1">搜索</button></p>
<p><input type="text" value="" id="" class="input_2" placeholder="输入宝贝" /><button class="button_search_2">搜索</button></p>
<p><input type="text" value="" id="" class="input_3" placeholder="输入店铺" /><button class="button_search_3">搜索</button></p>
</div>
</div>jQuery
$(function() {
$("#ul_menus").children("li").hover(function() { //鼠标悬浮菜单标签
var index = $(this).index(); //获取当前索引，从0开始
var ord = index + 1; //获取当前排序，从1开始
$("#ul_menus").find("a").removeClass(); //去除所有菜单的样式
$(this).children("a").addClass("style_" + ord); //添加当前菜单样式
$("#search_area").children("p").hide(); //隐藏所有搜索框
$("#search_area").children("p").eq(index).show(); //显示当前菜单对应索引的搜索框
})
});*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
