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>위 내용은 JavaScript를 사용하여 검색 엔진의 탐색 웹 검색 상자를 전환하는 방법에 대한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7552
15
1382
52
83
11
59
19
22
95
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
Xiaomi Mi 14Ultra에서 4g와 5g 사이를 전환하는 방법은 무엇입니까?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultra는 올해 가장 인기 있는 Xiaomi 모델 중 하나입니다. Xiaomi 14Ultra는 프로세서와 다양한 구성을 업그레이드할 뿐만 아니라 사용자에게 많은 새로운 기능 애플리케이션을 제공합니다. 이는 Xiaomi 14Ultra 휴대폰의 판매에서 확인할 수 있습니다. 많이 사용되는 기능이지만 아직은 모르실 수도 있는 일반적으로 사용되는 기능이 있습니다. 그렇다면 Xiaomi 14Ultra는 어떻게 4g와 5g 사이를 전환합니까? 구체적인 내용을 아래에서 소개해드리겠습니다! Xiaomi 14Ultra에서 4g와 5g 사이를 전환하는 방법은 무엇입니까? 1. 휴대폰의 설정 메뉴를 엽니다. 2. 설정 메뉴에서 '네트워크' 및 '모바일 네트워크' 옵션을 찾아서 선택하세요. 3. 모바일 네트워크 설정에 '기본 네트워크 유형' 옵션이 표시됩니다. 4. 이 옵션을 클릭하거나 선택하면 다음과 같은 내용이 표시됩니다.
win11 홈 버전에서 프로페셔널 버전으로 전환하기 위한 조작 튜토리얼_win11 홈 버전에서 프로페셔널 버전으로 전환하기 위한 조작 튜토리얼
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 홈 버전을 win11 프로페셔널 버전으로 업그레이드할 수 있습니다.
Apple 컴퓨터의 이중 시스템 부팅 모드 전환
Feb 19, 2024 pm 06:50 PM
Apple 컴퓨터를 시작할 때 Apple 듀얼 시스템 간을 전환하는 방법 Apple 컴퓨터는 자체 macOS 운영 체제를 실행하는 것 외에도 Windows와 같은 다른 운영 체제를 설치하도록 선택하여 듀얼 시스템 전환을 달성할 수도 있습니다. 그렇다면 부팅할 때 두 시스템 간에 어떻게 전환합니까? 이 문서에서는 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 검색 웹사이트: https://pan.qianfan.app 지원 네트워크 디스크: 집계 검색, Alibaba, Baidu, Quark, Lanzuo, Tianyi, Xunlei 네트워크 디스크 보기 방법: 로그인 필요, 회사 팔로우 활성화 코드 획득의 장점: 네트워크 디스크는 포괄적이고 리소스가 많으며 인터페이스가 간단합니다. 2. Maolipansou 웹사이트: alipansou.c
Excel에서 통합 문서 전환에 바로 가기 키를 사용하는 방법
Mar 20, 2024 pm 01:50 PM
Excel 소프트웨어를 적용할 때 우리는 일부 작업을 보다 쉽고 빠르게 수행하기 위해 단축키를 사용하는 데 익숙합니다. 때로는 Excel의 여러 테이블 간에 관련 데이터가 있을 때 작업 간에 지속적으로 전환해야 합니다. 빠른 전환 방법을 사용하면 전환에 소요되는 시간을 많이 절약할 수 있어 작업 효율을 크게 높일 수 있습니다. 빠른 전환을 완료하려면 어떤 방법을 사용할 수 있나요? 오늘 편집자는 이에 대해 이야기하겠습니다. 내용은 다음과 같습니다. Excel에서 통합 문서를 전환하기 위해 바로 가기 키를 사용합니다. 1. 먼저 열려 있는 엑셀 표 하단에 여러 개의 통합 문서가 표시됩니다. 아래 그림과 같이 여러 통합 문서 사이를 빠르게 전환해야 합니다. 2. 그런 다음 이동하지 않고 키보드의 Ctrl 키를 누르고 필요한 경우 오른쪽에 있는 작업을 선택합니다.
Huawei 휴대폰에서 듀얼 시스템 설정을 전환하는 방법
Feb 20, 2024 am 10:09 AM
스마트폰의 급속한 발전과 함께 선도적인 기술 기업인 Huawei는 많은 인기 휴대폰 제품을 출시했습니다. 그 중에서도 화웨이 듀얼 시스템은 많은 사용자들을 설레게 만드는 기능이다. 화웨이 듀얼 시스템을 통해 사용자는 동일한 휴대폰에서 안드로이드와 하모니OS 등 두 가지 운영체제를 동시에 실행할 수 있다. 이 기능을 사용하면 유연성과 편의성이 향상됩니다. 그렇다면 Huawei 듀얼 시스템 간에 설정을 전환하는 방법은 무엇입니까? 함께 알아봅시다. 먼저, Huawei 휴대폰에서 듀얼 시스템 설정으로 전환하기 전에,
전폭 및 반폭 이해: 전환 기술 살펴보기
Mar 25, 2024 pm 01:36 PM
일상생활에서 우리는 전각과 반각의 문제에 자주 직면하지만, 그 의미와 차이점을 깊이 이해하는 사람은 거의 없습니다. 전각과 반각은 실제로 문자 인코딩 방법의 개념이며 컴퓨터 입력, 편집, 조판 등에 고유한 특수 응용 프로그램이 있습니다. 이 기사에서는 전체 너비와 절반 너비의 차이점, 스위칭 기술 및 실제 응용 프로그램을 자세히 살펴보겠습니다. 우선, 한자 분야에서 전각과 반각의 정의는 전각자가 한 글자 위치를 차지하고, 반각자는 반자 위치를 차지한다는 것이다. 컴퓨터에서는 패스
