关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享
这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
废话不多说了，直接给大家贴代码了，具体代码如下所述：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
#search ul {
list-style-type: none;
display: block;
width: 100px;
height: 33px;
margin: 0;
padding: 0;
border: 0px;
float: left;
}
#search li {
border: 0px;
margin: 0px;
padding: 0px;
}
#search .selected {
display: block;
}
#search form {
margin: 0px;
padding: 0px;
}
#search input {
height: 30px;
width: 400px;
margin: 0px;
}
#search .button {
font-size: 17px;
font-weight: 600;
color: #002D96;
height: 30px;
width: 110px;
margin-left: 50px;
background: #e6efc2;
opacity: 0.8;
border: #7fb80e 1px solid;
cursor: pointer;
-webkit-border-radius: 2px;
border-radius: 2px;
}
</style>
</head>
<body>
<p id="search" align="center">
<table>
<tr>
<td>
<ul>
<li style="display:block;"><img width="80" src="https://www.baidu.com/img/bd_logo1.png"/></li>
<li style="display:none;"><img width="80" src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"/></li>
<li style="display:none;"><img width="80" src="https://www.sogou.com/images/logo2014/error180x60.png"/></li>
</ul>
</td>
<td id="from_box" style="padding-left:10px;">
<form id="from_baidu" style="display:block" action="http://www.baidu.com/baidu" target="_blank" method="get">
<input name="" type="hidden" value="baidu"/>
<input type="text" name="word"/>
<input class="button" type="submit" value="百度一下" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
</form>
<form id="from_google" style="display:none" action="http://www.google.com/search" target="_blank" method="get">
<input type="text" name="q"/>
<input class="button" type="submit" value="google搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
</form>
<form id="from_sougou" style="display:none" action="http://www.sogou.com/web" target="_blank" name="sogou_queryform">
<input type="text" name="query">
<input class="button" type="submit" value="sougou搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
</form>
</td>
</tr>
</table>
</p>
<script>
var search = document.getElementById("search");
var formbox = document.getElementById('from_box');
var forms = formbox.getElementsByTagName("form");
var ul = search.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
var length = li.length;
li[0].onclick = function() {
for(var i = 1; i < length; i++) {
li[i].style.display = "block";
}
}
var n = 0; //第一个显示表单的位置
for(var i = 1; i < length; i++) {
li[i].onclick = function(a) {
return function() {
//交换显示的html内容
var temp = li[0].innerHTML;
li[0].innerHTML = this.innerHTML;
this.innerHTML = temp;
for(var j = 1; j < length; j++) {
li[j].style.display ="none";
}
//交换表单的显示
//alert(li[0].innerHTML.substring(37,7));
//alert(li[0].innerHTML.indexOf('baidu'));
hidden_from(); //隐藏表单
if(li[0].innerHTML.indexOf('baidu') > 0) {
document.getElementById('from_baidu').style.display = 'block';
} else if(li[0].innerHTML.indexOf('google') > 0) {
document.getElementById('from_google').style.display = 'block';
} else if(li[0].innerHTML.indexOf('sougou') > 0) {
document.getElementById('from_sougou').style.display = 'block';
}
//alert(this.innerHTML);
//forms[n].style.display = "none";
//forms[a].style.display = "block";
//n = a;
}
}(i);
li[i].onmouseover = function() {
this.style.border ="#7fb80e 1px solid";
this.style.background ="#f2eada";
}
li[i].onmouseout = function() {
this.style.border = "0px";
this.style.background = "inherit";
}
}
//隐藏搜索框表单的函数
function hidden_from() {
for(var j = 0; j < forms.length; j++) {
forms[j].style.display = "none";
}
}
</script>
</body>
</html>Atas ialah kandungan terperinci 关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Bagaimana untuk bertukar antara 4g dan 5g pada Xiaomi Mi 14Ultra?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultra adalah salah satu model Xiaomi yang paling popular tahun ini bukan sahaja menaik taraf pemproses dan pelbagai konfigurasi, tetapi juga membawa banyak aplikasi berfungsi kepada pengguna Ini boleh dilihat dari jualan telefon bimbit Xiaomi 14Ultra popular, tetapi terdapat beberapa fungsi yang biasa digunakan yang mungkin belum anda ketahui. Jadi bagaimanakah Xiaomi 14Ultra bertukar antara 4g dan 5g? Izinkan saya memperkenalkan kandungan khusus kepada anda di bawah! Bagaimana untuk menukar antara 4g dan 5g pada Xiaomi 14Ultra? 1. Buka menu tetapan telefon anda. 2. Cari dan pilih pilihan "Rangkaian" dan "Rangkaian Mudah Alih" dalam menu tetapan. 3. Dalam tetapan rangkaian mudah alih, anda akan melihat pilihan "Jenis rangkaian pilihan". 4. Klik atau pilih pilihan ini dan anda akan melihat
Tutorial operasi untuk menukar daripada versi rumah win11 kepada versi profesional_Tutorial operasi untuk menukar daripada versi rumah win11 kepada versi profesional
Mar 20, 2024 pm 01:58 PM
Bagaimana untuk menukar Win11 Home Edition kepada Win11 Professional Edition? Dalam sistem Win11, ia dibahagikan kepada Home Edition, Professional Edition, Enterprise Edition, dan lain-lain, dan kebanyakan komputer riba Win11 telah dipasang dengan sistem Win11 Home Edition. Hari ini, editor akan menunjukkan kepada anda langkah-langkah untuk beralih daripada versi rumah win11 kepada versi profesional 1. Pertama, klik kanan pada komputer ini pada desktop dan sifat win11. 2. Klik Tukar Kunci Produk atau Tingkatkan Windows. 3. Kemudian klik Tukar Kunci Produk selepas memasukkan. 4. Masukkan kekunci pengaktifan: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB dan pilih Seterusnya. 5. Kemudian ia akan mendorong kejayaan, jadi anda boleh menaik taraf versi rumah win11 kepada versi profesional win11.
Tukar mod but sistem dwi komputer Apple
Feb 19, 2024 pm 06:50 PM
Cara bertukar antara sistem dwi Apple apabila memulakan komputer Apple adalah peranti berkuasa Selain sistem pengendalian macOS mereka sendiri, anda juga boleh memilih untuk memasang sistem pengendalian lain, seperti Windows, untuk mencapai pensuisan dwi sistem. Jadi bagaimana kita bertukar antara kedua-dua sistem semasa boot? Artikel ini akan memperkenalkan kepada anda cara menukar antara sistem dwi pada komputer Apple. Pertama sekali, sebelum memasang sistem dwi, kami perlu mengesahkan sama ada komputer Apple kami menyokong pensuisan dwi sistem. Secara umumnya, komputer Apple adalah berasaskan
Pintu masuk enjin carian cakera awan Baidu
Feb 27, 2024 pm 01:00 PM
Baidu Cloud ialah perisian yang membolehkan pengguna menyimpan banyak fail Jadi apakah pintu masuk ke enjin carian Baidu Cloud Disk? Pengguna boleh memasukkan URL https://pan.baidu.com untuk memasuki Baidu Cloud Disk Perkongsian pintu masuk terbaru ke enjin carian Baidu Cloud Disk ini akan memberi anda pengenalan terperinci. . Pintu masuk enjin carian cakera awan Baidu 1. Laman web carian Qianfan: https://pan.qianfan.app Menyokong cakera rangkaian: carian agregat, Alibaba, Baidu, Quark, Lanzuo, Tianyi, kaedah paparan cakera rangkaian Xunlei: log masuk diperlukan, ikut syarikat Kelebihan mendapatkan kod pengaktifan: Cakera rangkaian adalah komprehensif, terdapat banyak sumber, dan antara muka adalah mudah. 2. Laman web Maolipansou: alipansou.c
Cara menggunakan kekunci pintasan untuk menukar buku kerja dalam excel
Mar 20, 2024 pm 01:50 PM
Dalam aplikasi perisian excel, kita terbiasa menggunakan kekunci pintasan untuk membuat beberapa operasi lebih mudah dan lebih cepat Kadang-kadang terdapat data yang berkaitan antara beberapa jadual dalam excel Apabila kita melihatnya, kita perlu sentiasa bertukar antara tugas kaedah pensuisan yang lebih cepat, ia akan menjimatkan banyak masa yang terbuang pada pensuisan, yang akan sangat membantu meningkatkan kecekapan kerja Apakah kaedah yang boleh digunakan untuk menyelesaikan isu ini, editor akan membincangkannya hari ini Kandungannya ialah: Bagaimana untuk menggunakan kekunci pintasan untuk menukar buku kerja dalam Excel. 1. Mula-mula, anda boleh melihat berbilang buku kerja di bahagian bawah jadual excel terbuka Anda perlu bertukar dengan cepat antara buku kerja yang berbeza, seperti yang ditunjukkan dalam rajah di bawah. 2. Kemudian tekan kekunci Ctrl pada papan kekunci tanpa bergerak, dan pilih kerja di sebelah kanan jika anda perlu
Bagaimana untuk menukar tetapan sistem dwi pada telefon mudah alih Huawei
Feb 20, 2024 am 10:09 AM
Dengan perkembangan pesat telefon pintar, Huawei, sebagai syarikat teknologi terkemuka, telah melancarkan banyak produk telefon mudah alih yang popular. Antaranya, sistem dual Huawei merupakan ciri yang membuatkan ramai pengguna teruja. Melalui sistem dwi Huawei, pengguna boleh menjalankan dua sistem pengendalian, seperti Android dan HarmonyOS, pada telefon mudah alih yang sama pada masa yang sama. Ciri ini membolehkan fleksibiliti dan kemudahan yang lebih besar. Jadi, bagaimana untuk menukar tetapan antara sistem dwi Huawei? Mari kita ketahui bersama. Pertama, sebelum beralih kepada persediaan sistem dwi pada telefon Huawei anda,
Memahami lebar penuh dan separuh lebar: lihat pada teknik pensuisan
Mar 25, 2024 pm 01:36 PM
Dalam kehidupan seharian, kita sering menghadapi masalah lebar penuh dan separuh lebar, tetapi beberapa orang mungkin mempunyai pemahaman yang mendalam tentang makna dan perbezaannya. Lebar penuh dan separuh lebar sebenarnya adalah konsep kaedah pengekodan aksara, dan ia mempunyai aplikasi khas dalam input komputer, penyuntingan, penataan huruf, dsb. Artikel ini akan menyelidiki perbezaan antara lebar penuh dan separuh lebar, teknik penukaran dan aplikasi kehidupan sebenar. Pertama sekali, takrifan lebar penuh dan separuh lebar dalam bidang aksara Cina ialah: aksara lebar penuh menduduki satu kedudukan aksara, dan aksara separuh lebar menduduki separuh kedudukan aksara. Dalam komputer, lulus
