Shulou(Shulou.com)06/01 Report--

This article mainly introduces JS how to simulate the implementation of Baidu search box and tabs, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Exercise 1

In the search box, enter the relevant numbers, display the relevant content below, and simulate Baidu search. The detailed code is as follows:

Document .content {width: 600px; height: 500px; margin: 0 auto;} .show {display: none; width: 200px; height: 300px; border: solid 1px black } / / take an array as an example, you can connect to the database Query data let arr = ['web front-end elite special training class', 'HTML core technology RMB 199', 'CSS core technology RMB 299', 'Vue core technology RMB 599', 'CSS+HTML core technology RMB 299', 'web front-end online mall RMB 99', 'JavaScript core technology RMB 399', 'JavaScript advanced technology RMB 899'] / / complete first, show and hide the display area let input = document.getElementById ('val'); let show = document.getElementById (' show'); input.onkeyup = function () {/ / trigger show.style.display = 'block' when the keyboard is raised / / each item of input.value and arr is matched with indexOf (): the method returns the position where a specified string value first appears in the string, matches to the subscript, and does not return-1 let str =''. Item, the first element in arr.forEach ((item) = > {/ / forEach ()), represents the elements in the array, each let res = item.indexOf (input.value); if (res! =-1) {str + ='

'+ item +'

';}}) / / determine whether input.value is empty or not in the str array, and give the user a prompt if (! input.value | |! str) {show [XSS _ clean] ='

No result for the time being

';} else {show [XSS _ clean] = str;}} input.onblur = function () {/ / lose focus Hidden show.style.display =' none'; input.value =';}

Results:

When clicking on the search box:

Exercise 2, tab, the detailed code is as follows: Document ul, li {margin: 0; padding: 0; list-style: none;} ul {overflow: hidden;} li {width: 100px; height: 40px Background-color: # ccc; border: 1px solid # ccc; float: left; line-height: 40px; / * set line height equal to height height text will be vertically centered * / text-align: center;} div {width: 406px; height: 406px Border: 1px solid # ccc;} img {width: 406px; height: 406px; display: none;} Daju Ying short American short puppet

/ / 1. Move to that tab to change the background color, restore the background color when the corresponding content area is displayed / / removed, hide let li = document.getElementsByTagName ('li'); let img = document.getElementsByTagName (' img'); for (let I = 0; I < li.length) The subscript of the array of advanced elements is set in js to get the subscript of the array using .index Li [I] .index = I; / / the attribute Li [I] .onMousemove = function () {Li [I] .style.backgroundColor = 'yellow' / / hide all the pictures first, and then let the corresponding pictures appear for (let j = 0; j < img.length; jacks +) {img [j] .style.display = 'none';} img [this.index] .style.display =' block' } / / restore the original color when moving out [I] .onmouseout = function () {Li [I] .style.backgroundColor ='# eee';}}

Results:

File:///C:/Users/DELL/Pictures/Screenshots/ screenshot (15). Jpg

When you click the second tab:

Thank you for reading this article carefully. I hope the article "how to simulate the implementation of Baidu search box and tabs by JS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.