JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面的方法
更新時(shí)間：2022年12月01日 08:40:37 作者：liudachu
這篇文章主要介紹了JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面
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(0);">搜索</button>
</form>jquery綁定事件
<script>
$(function () {//獲取表單并跳轉(zhuǎn)
$("#btn").click(function () {
var key=$("#ipt").val();
var url="/passer_war_exploded/page/search/"+key;
location.href=url;
});
});
</script>頁(yè)面不跳轉(zhuǎn)：error 解決
首先如果沒(méi)有像單詞 標(biāo)點(diǎn)符號(hào)錯(cuò)誤情況下
點(diǎn)擊按鈕
按鈕如果不設(shè)置type類型，則默認(rèn)type類型為submit 提交
當(dāng)不需要提交表單，而是去執(zhí)行其他時(shí)間 如跳轉(zhuǎn)頁(yè)面需要 手動(dòng)設(shè)置type類型：
修改type類型后，下面就能正常跳轉(zhuǎn)到百度頁(yè)面了。
（不寫(xiě)type類型，默認(rèn)為submit時(shí)，跳轉(zhuǎn)不了）
jquery點(diǎn)擊跳轉(zhuǎn)到相應(yīng)位置
CSS部分
<style>
body {
background: #F1F1F1;
}
.wrapper{
width: 1200px;
}
.duoxuanti {
color: #4D76E0;
}
.blue-bg {
background-color: #4C76E2;
color: #fff;
border-radius: 3px;
}
.search-main {
position: relative;
background: #ffffff;
overflow: hidden;
padding-bottom: 15px;
}
.swiper-title2 {
position: fixed;
top: 0px;
width: 1200px;
height: 50px;
font-size: 16px;
line-height: 50px;
color: #333;
border-left: 2px solid #189349;
font-weight: 600;
background-color: #fff;
z-index: 99;
border: 1px solid #DEDEDE;
}
.xx {
display: flex;
text-align: center;
white-space: nowrap;
font-size: 15px;
}
.screen {
flex: 1;
font-weight: 600;
color: red;
font-size: 17px;
}
.xx a {
flex: 1;
margin-left: 2px;
}
.xx a:hover {
background-color: #4C76E2;
color: #fff;
border-radius: 3px;
}
.zikao-tr {
display: flex;
padding: 3px;
}
.td-item1 {
flex: 3;
padding-left: 15px;
}
.td-item2 {
flex: 97;
display: flex;
flex-wrap: wrap;
}
.td-item1 button {
border: 1px solid #E1E1E1;
background-color: #F8F8F8;
color: #FD3938;
font-size: 13px;
width: 22px;
height: 22px;
text-align: center;
line-height: 22px;
}
.td-item1 button:hover {
color: #FFFFFf;
background-color: red;
}
.td-item2 div {
width: 20%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.td-item2 div a {
line-height: 29px;
}
.td-item2 div a:hover {
color: #FD3938;
}
.zikaozhuan-title {
line-height: 30px;
font-weight: 600;
color: red;
font-size: 17px;
margin-left: 15px;
margin-top: 10px;
}
.click_but {
border: 1px solid #D8D8D8;
background: #4E76DE !important;
color: #FFF !important;
}
.table3 {
position: relative;
top: 60px;
}
</style>HTML部分
<div class="search-main wrapper">
<div class="swiper-title2 xx nav-top">
<span class="screen">篩選:</span>
<a href="#" class="blue-bg">全部</a>
<a href="#" data-typeid="1">A</a>
<a href="#" data-typeid="2">B</a>
<a href="#" data-typeid="3">C</a>
<a href="#" data-typeid="4">D</a>
<a href="#" data-typeid="5">E</a>
<a href="#" data-typeid="6">F</a>
<a href="#" data-typeid="7">G</a>
<a href="#" data-typeid="8">H</a>
<a href="#" data-typeid="9">I</a>
<a href="#" data-typeid="10">J</a>
</div>
<table class="table3" align="center" cellpadding="20" cellspacing="0" width=1200px>
<tbody>
<tr class="zikao-tr" id="type-1" data-typeid="1">
<td class="td-item1"><button>A</button></td>
<td class="td-item2">
<div><a href="#" name="A">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-2" data-typeid="2">
<td class="td-item1"><button>B</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-3" data-typeid="3">
<td class="td-item1"><button>C</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-4" data-typeid="4">
<td class="td-item1"><button>D</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-5" data-typeid="5">
<td class="td-item1"><button>E</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-6" data-typeid="6">
<td class="td-item1"><button>F</button></td>
<td class="td-item2">
<div><a href="#" name="F">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-7" data-typeid="7">
<td class="td-item1"><button>G</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-8" data-typeid="8">
<td class="td-item1"><button>H</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-9" data-typeid="9">
<td class="td-item1"><button>I</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(停考)</a></div>
</td>
</tr>
<tr class="zikao-tr" id="type-10" data-typeid="10">
<td class="td-item1"><button>J</button></td>
<td class="td-item2">
<div><a href="#">04145安全生產(chǎn)法及相關(guān)04145安全生產(chǎn)法及相關(guān)法律知識(shí)法律知識(shí)</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
<div><a href="#">01B0206_國(guó)際貿(mào)易(?？?</a></div>
</td>
</tr>
</tbody>
</table>
</div>
JS部分
$(function () {
//點(diǎn)擊導(dǎo)航跳轉(zhuǎn)
$(".nav-top a").on("click", function () {
let id = $(this).attr("data-typeid");
var top = $("#type-" + id).offset().top - 60 + 'px';
$("html,body").animate({
scrollTop: $("#type-" + id).offset().top - 60 + 'px',
}, 500);
});
// 獲取導(dǎo)航欄到屏幕頂部的距離
var oTop = $(".swiper-title2").offset().top;
var martop = $('.swiper-title2').outerHeight();
var sTop = 0;
$(window).scroll(function () {
sTop = $(this).scrollTop();
if (sTop >= oTop) {
$(".swiper-title3").css({
"visibility": "visible",
});
} else {
$(".swiper-title3").css({
"visibility": "hidden",
});
}
});
})
圖片展示
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)潔實(shí)用的BootStrap jQuery手風(fēng)琴插件
這篇文章主要介紹了簡(jiǎn)潔實(shí)用的BootStrap jQuery手風(fēng)琴插件知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
基于jquery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JQuery中DOM加載與事件執(zhí)行實(shí)例分析
這篇文章主要介紹了JQuery中DOM加載與事件執(zhí)行,實(shí)例分析了jQuery中DOM加載及事件執(zhí)行的原理與實(shí)現(xiàn)方法,并補(bǔ)充說(shuō)明了windows.onload方法和$(document).ready()方法的區(qū)別,需要的朋友可以參考下2015-06-06
JQuery Study Notes 學(xué)習(xí)筆記(一)
jquery是當(dāng)前比較流行的js類庫(kù)，學(xué)習(xí)它可以實(shí)現(xiàn)很多功能。2010-08-08
本文跟大家分享了兩個(gè)Jquery菜單效果，各有各的特色，希望大家都會(huì)喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下2015-09-09
jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯(cuò)誤提示等知識(shí),然后給出了簡(jiǎn)單使用實(shí)例和ASP.NET MVC模式下的使用實(shí)例,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery Easyui一些用法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
基于jQuery實(shí)現(xiàn)滾動(dòng)刷新效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)滾動(dòng)刷新效果，使用Ajax獲取后臺(tái)數(shù)據(jù)更新前端頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery.multiselect 多選下拉框?qū)崿F(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Jquery+ajax請(qǐng)求data顯示在GridView上(asp.net)
Jquery ajax請(qǐng)求data顯示在asp.net中GridView控件上，需要的朋友可以參考下。2010-08-08