两种搜索模式更换

最新推荐文章于 2024-10-21 15:47:00 发布

原创最新推荐文章于 2024-10-21 15:47:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的网页表单搜索功能。该功能包括一个文本输入框及两个切换按钮，允许用户以不同方式进行搜索操作。点击换种方式搜索会隐藏原始输入框并显示新的输入框及搜索按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <form action="javascript:search_brand()" name="searchForm">
        <img src="<?php echo base_url('Public/images/icon_search.gif')?>" width="26" height="22" border="0" alt="SEARCH">
        <input type="text" name="ss" placeholder="请输入搜索关键字" id="ss" size="15">
        <input type="text" name="ss" style="display: none" id="sss" class="ss" size="15"/>
        <input type="button" value="搜索" style="display: none" class="sou">
        <b id="bi" style="display: none;color: red;cursor: pointer">换种方式搜索</b>
        <b id="zhan" style="color: red;cursor: pointer">换种方式搜索</b>
    </form>
  <script>
        $(document).on('click','#zhan',function(){
            //点击换种方式搜索
            $('#zhan').hide('hide');//展示隐藏
            $('#ss').hide('hide');//文本框隐藏
            $('#sss').show('slow')//换一个文本框展示
            $('.sou').show('slow');//搜索按钮展示
            $('#bi').show('slow');//换一个字段提示
        })
        $(document).on('click','#bi',function(){
            $('.sou').hide('hide');
            $('#bi').hide('hide');
            $('#zhan').show('slow');
            $('#ss').show('slow');
            $('#sss').hide('hide')
        })
    </script>