最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery选项卡搜索框切换

来源:http://www.erdangjiade.com/ 二当家的 2015-05-27 08:00浏览(1485)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery选项卡搜索框切换
查看演示 下载资源: 120

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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(); //显示当前菜单对应索引的搜索框
    })
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/133.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    12-12 09:34
    DawnZhao
    挺好,挺实用的。
1 2