JQuery点击按钮跳转页面的方法

jQuery
364
0
0
2023-06-26
jQuery事件与动画超详细讲解
上一篇
jQuery 事件绑定及取消 bind live delegate on one区别解析
下一篇
目录
  • JQuery点击按钮跳转页面
  • jquery点击跳转到相应位置

JQuery点击按钮跳转页面

form表单

<form class="navbar-form navbar-left" action="">
     <div class="form-group">
          <input type="text" class="form-control" placeholder="搜目的地/攻略/酒店" id="ipt">
      </div>
      <button type="button" class="btn btn-default" id="btn" onclick="javascript:void();">搜索</button>
</form>

jquery绑定事件

<script>
      $(function () {//获取表单并跳转
        $("#btn").click(function () {
            var key=$("#ipt").val();
            var url="/passer_war_exploded/page/search/"+key;
            location.href=url;
        });
    });
</script>

页面不跳转：error 解决

首先如果没有像单词 标点符号错误情况下

点击按钮

按钮如果不设置type类型，则默认type类型为submit 提交

在这里插入图片描述

当不需要提交表单，而是去执行其他时间 如跳转页面需要 手动设置type类型：


在这里插入图片描述

修改type类型后，下面就能正常跳转到百度页面了。

（不写type类型，默认为submit时，跳转不了）

jquery点击跳转到相应位置

CSS部分

<style>
body {
    background: #FF1F1;
}
.wrapper{
    width:px;
}
.duoxuanti {
    color: #D76E0;
}

.blue-bg {
    background-color: #C76E2;
    color: #fff;
    border-radius:px;
}

.search-main {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    padding-bottom:px;
}
.swiper-title {
    position: fixed;
    top:px;
    width:px;
    height:px;
    font-size:px;
    line-height:px;
    color: #;
    border-left:px solid #189349;
    font-weight:;
    background-color: #fff;
    z-index:;
    border:px solid #DEDEDE;
}

.xx {
    display: flex;
    text-align: center;
    white-space: nowrap;
    font-size:px;
}

.screen {
    flex:;
    font-weight:;
    color: red;
    font-size:px;
}

.xx a {
    flex:;
    margin-left:px;
}

.xx a:hover {
    background-color: #C76E2;
    color: #fff;
    border-radius:px;
}

.zikao-tr {
    display: flex;
    padding:px;
}

.td-item {
    flex:;
    padding-left:px;
}

.td-item {
    flex:;
    display: flex;
    flex-wrap: wrap;
}

.td-item button {
    border:px solid #E1E1E1;
    background-color: #FF8F8;
    color: #FD;
    font-size:px;
    width:px;
    height:px;
    text-align: center;
    line-height:px;
}

.td-item button:hover {
    color: #FFFFFf;
    background-color: red;
}

.td-item div {
    width:%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-item div a {
    line-height:px;
}

.td-item div a:hover {
    color: #FD;
}

.zikaozhuan-title {
    line-height:px;
    font-weight:;
    color: red;
    font-size:px;
    margin-left:px;
    margin-top:px;
}

.click_but {
    border:px solid #D8D8D8;
    background: #E76DE !important;
    color: #FFF !important;
}

.table {
    position: relative;
    top:px;
}
</style>

HTML部分

   <div class="search-main wrapper">
        <div class="swiper-title xx nav-top">
            <span class="screen">筛选:</span>
            <a href="#" class="blue-bg">全部</a>
            <a href="#" data-typeid="">A</a>
            <a href="#" data-typeid="">B</a>
            <a href="#" data-typeid="">C</a>
            <a href="#" data-typeid="">D</a>
            <a href="#" data-typeid="">E</a>
            <a href="#" data-typeid="">F</a>
            <a href="#" data-typeid="">G</a>
            <a href="#" data-typeid="">H</a>
            <a href="#" data-typeid="">I</a>
            <a href="#" data-typeid="">J</a>
        </div>
        <table class="table" align="center" cellpadding="20" cellspacing="0" width=1200px>
            <tbody>
                <tr class="zikao-tr" id="type-" data-typeid="1">
                    <td class="td-item"><button>A</button></td>
                    <td class="td-item">
                        <div><a href="#" name="A">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="2">
                    <td class="td-item"><button>B</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="3">
                    <td class="td-item"><button>C</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="4">
                    <td class="td-item"><button>D</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="5">
                    <td class="td-item"><button>E</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="6">
                    <td class="td-item"><button>F</button></td>
                    <td class="td-item">
                        <div><a href="#" name="F">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="7">
                    <td class="td-item"><button>G</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="8">
                    <td class="td-item"><button>H</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="9">
                    <td class="td-item"><button>I</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
                <tr class="zikao-tr" id="type-" data-typeid="10">
                    <td class="td-item"><button>J</button></td>
                    <td class="td-item">
                        <div><a href="#">安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                        <div><a href="#">B0206_国际贸易(停考)</a></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

JS部分

 $(function () {
    //点击导航跳转
    $(".nav-top a").on("click", function () {
        let id = $(this).attr("data-typeid");
        var top = $("#type-" + id).offset().top - + 'px';
        $("html,body").animate({
            scrollTop: $("#type-" + id).offset().top - + 'px',
        },);
    });

    // 获取导航栏到屏幕顶部的距离
    var oTop = $(".swiper-title").offset().top;
    var martop = $('.swiper-title').outerHeight();

    var sTop =;
    $(window).scroll(function () {
        sTop = $(this).scrollTop();
        if (sTop >= oTop) {
            $(".swiper-title").css({
                "visibility": "visible",
            });
        } else {
            $(".swiper-title").css({
                "visibility": "hidden",
            });
        }
    });
})

图片展示

jQuery事件与动画超详细讲解
上一篇
jQuery 事件绑定及取消 bind live delegate on one区别解析
下一篇