jQuery选项卡搜索框切换

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

分类：选项卡/滑动门 > 选项卡切换难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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