jQuery选项卡搜索框切换

收藏

我们经常会看到商城的搜索区域，会有商品和商家的搜索选项卡，通过手动切换选项卡，可查询自己想要的搜索结果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们放置三个菜单按钮及对应的搜索框。

<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(); //显示当前菜单对应索引的搜索框
    })
});