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類(lèi)型，則默認(rèn)type類(lèi)型為submit 提交
當(dāng)不需要提交表單，而是去執(zhí)行其他時(shí)間 如跳轉(zhuǎn)頁(yè)面需要 手動(dòng)設(shè)置type類(lèi)型：
修改type類(lèi)型后，下面就能正常跳轉(zhuǎn)到百度頁(yè)面了。
（不寫(xiě)type類(lèi)型，默認(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)文章
jQuery在線選座位插件seat-charts特效代碼分享
這篇文章主要介紹了jQuery在線選座位插件seat-charts特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)?lái)一篇淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery validate 實(shí)現(xiàn)動(dòng)態(tài)增加/刪除驗(yàn)證規(guī)則操作示例
這篇文章主要介紹了jquery validate 實(shí)現(xiàn)動(dòng)態(tài)增加/刪除驗(yàn)證規(guī)則操作,結(jié)合實(shí)例形式分析了jQuery validate表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
本文為大家揭秘如何使表單更加美化，感興趣的小伙伴們可以參考一下2015-10-10
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
本文是基于jquery代碼實(shí)現(xiàn)的添加和刪除輸入文本框標(biāo)簽代碼，非常不錯(cuò)，具有參考借鑒，需要的朋友一起看下吧2016-05-05
jQuery中常用動(dòng)畫(huà)效果函數(shù)(日常整理)
這篇文章主要介紹了小編日常收集整理的關(guān)于jQuery中常用動(dòng)畫(huà)效果函數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
jquery和雅虎的yql服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)服務(wù)示例
本文介紹一個(gè)利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)功能,需要的朋友可以參考下2014-02-02
jquery實(shí)現(xiàn)textarea輸入字符控制(仿微博輸入控制字符)
首先獲取輸入框的值然后獲取輸入框的值;如果字?jǐn)?shù)大于500、發(fā)布按鈕禁用否從發(fā)布按鈕啟用，感興趣的朋友可以詳細(xì)了解下哈2013-04-04