JavaScript を使用して検索エンジンのナビゲーション Web 検索ボックスを切り替える方法に関するコード例の共有
この記事では、JavaScript を使用して検索エンジンを切り替えるナビゲーション Web ページの検索ボックスのサンプル コードを主に紹介します。これは非常に優れており、必要な友人は参照できます。
これ以上のナンセンスはありません。コードを直接投稿します。詳細は以下のとおりです:
<!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>以上がJavaScript を使用して検索エンジンのナビゲーション Web 検索ボックスを切り替える方法に関するコード例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7552
15
1382
52
83
11
22
95
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
Xiaomi Mi 14Ultraで4gと5gを切り替えるにはどうすればよいですか?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultraは、今年最も人気のあるXiaomiモデルの1つです.Xiaomi 14Ultraは、プロセッサとさまざまな構成をアップグレードするだけでなく、多くの新しい機能アプリケーションをユーザーにもたらします.これは、Xiaomi 14Ultra携帯電話の販売からもわかります.人気がありますが、まだ知られていない一般的に使用される機能がいくつかあります。では、Xiaomi 14Ultraはどのようにして4gと5gを切り替えるのでしょうか？以下に具体的な内容をご紹介していきます！ Xiaomi 14Ultraで4gと5gを切り替えるにはどうすればよいですか? 1. 電話機の設定メニューを開きます。 2. 設定メニューで「ネットワーク」および「モバイル ネットワーク」オプションを見つけて選択します。 3. モバイル ネットワーク設定に、[優先ネットワーク タイプ] オプションが表示されます。 4. このオプションをクリックまたは選択すると、次の内容が表示されます。
win11 home版からprofessional版へ切り替える操作チュートリアル_win11 home版からprofessional版へ切り替える操作チュートリアル
Mar 20, 2024 pm 01:58 PM
Win11 Home Edition を Win11 Professional Edition に変換するにはどうすればよいですか? Win11 システムは Home Edition、Professional Edition、Enterprise Edition などに分かれており、ほとんどの Win11 ノートブックには Win11 Home Edition システムがプリインストールされています。今日は、エディターが win11 ホーム バージョンからプロフェッショナル バージョンに切り替える手順を示します! 1. まず、win11 デスクトップとプロパティでこのコンピューターを右クリックします。 2. 「プロダクト キーの変更」または「Windows のアップグレード」をクリックします。 3. 入力後、「プロダクト キーの変更」をクリックします。 4. アクティベーション キー 8G7XN-V7YWC-W8RPC-V73KB-YWRDB を入力し、[次へ] を選択します。 5.その後、成功を促すメッセージが表示されるので、win11 home バージョンを win11 professional バージョンにアップグレードできます。
Apple コンピュータのデュアル システム ブート モードを切り替える
Feb 19, 2024 pm 06:50 PM
起動時に Apple デュアル システムを切り替える方法 Apple コンピュータは強力なデバイスなので、独自の macOS オペレーティング システムに加えて、Windows などの他のオペレーティング システムをインストールしてデュアル システム切り替えを実現することもできます。では、起動時に 2 つのシステムを切り替えるにはどうすればよいでしょうか?この記事では、Apple コンピュータのデュアル システムを切り替える方法を紹介します。まず、デュアル システムをインストールする前に、Apple コンピュータがデュアル システムの切り替えをサポートしているかどうかを確認する必要があります。一般的に言えば、Apple コンピュータは以下に基づいています。
Baidu クラウド ディスク検索エンジンの入り口
Feb 27, 2024 pm 01:00 PM
Baidu Cloud は多くのファイルを保存できるソフトウェアですが、Baidu Cloud Disk 検索エンジンへの入り口は何でしょうか?ユーザーは URL https://pan.baidu.com を入力して Baidu Cloud Disk にアクセスできます。Baidu Cloud Disk 検索エンジンへの最新の入り口を共有することで、詳細な紹介が得られます。以下は詳細な紹介です。見てください。 。 Baidu クラウド ディスク検索エンジンの入り口 1. Qianfan 検索 Web サイト: https://pan.qianfan.app ネットワーク ディスクをサポート: 集約検索、Alibaba、Baidu、Quark、Lanzuo、Tianyi、Xunlei ネットワーク ディスクの表示方法: ログインが必要、会社に従ってくださいアクティベーション コードを取得する利点: ネットワーク ディスクは包括的で、多くのリソースがあり、インターフェイスがシンプルです。 2. マオリパンソウのウェブサイト: alipansou.c
Excelでブックを切り替えるショートカットキーの使い方
Mar 20, 2024 pm 01:50 PM
Excel ソフトウェアのアプリケーションでは、一部の操作を簡単かつ迅速に行うためにショートカット キーを使用することに慣れています。Excel の複数のテーブル間に関連するデータがある場合があります。それを表示するときに、タスクを常に切り替える必要があります。高速な切り替え方法を使用すると、切り替えにかかる無駄な時間が大幅に節約され、作業効率が大幅に向上します。クイック切り替えを完了するにはどのような方法を使用できますか? この問題に対処するために、今日は編集者がそれについてお話します。内容は次のとおりです。 Excel でブックを切り替えるショートカット キーを使用します。 1. まず、開いた Excel テーブルの下部に複数のワークブックが表示されますが、下の図に示すように、異なるワークブックをすばやく切り替える必要があります。 2. 次に、キーボードの Ctrl キーを動かさずに押し、必要に応じて右側のジョブを選択します。
Huawei携帯電話でデュアルシステム設定を切り替える方法
Feb 20, 2024 am 10:09 AM
スマートフォンの急速な発展に伴い、ファーウェイは大手テクノロジー企業として、多くの人気の携帯電話製品を発売してきました。中でもファーウェイのデュアルシステムは多くのユーザーを興奮させる機能です。 Huawei デュアル システムにより、ユーザーは Android と HarmonyOS などの 2 つのオペレーティング システムを同じ携帯電話で同時に実行できます。この機能により、柔軟性と利便性が向上します。では、Huawei デュアル システム間で設定を切り替えるにはどうすればよいでしょうか?一緒に調べてみましょう。まず、Huawei スマートフォンでデュアル システム セットアップに切り替える前に、
全角と半角を理解する: 切り替えテクニックの概要
Mar 25, 2024 pm 01:36 PM
日常生活の中で「全角」と「半角」の問題に遭遇することは多いですが、その意味や違いを深く理解している人は少ないかもしれません。全角と半角は実際には文字エンコード方式の概念であり、コンピュータの入力、編集、植字などに特別な用途があります。この記事では、全角と半角の違い、切り替えテクニック、実際のアプリケーションについて詳しく説明します。まず、漢字における全角と半角の定義は、全角文字は1文字位置を占め、半角文字は1文字位置の半分を占めます。コンピューターでは、パスします
