Home > Developer > JavaScript
In the upper left corner of google.com.hk, there is a more link with a target address. However, when we click, in most cases, a drop-down list is displayed for users to choose from (this is a typical progressive enhancement form ). How can this problem be solved? -- If your browser supports javascript, you can enjoy this quick navigation service.
Now, Please disable the javascript function of your browser (do not disable the slam here), access google.com.hk again, and click More again. What happened? Yes, no drop-down list is displayed, and a new page is opened. (This is a typical stable degradation ). How can this problem be solved? -- If your browser does not support javascript, you can still access my website.
How to implement this function similar to google?
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function displayMenu (){
// Display the navigation list;
}
</Script>
<A href = "target page" onclick = "displayMenu (); return false;"> More» </a>
Explanation: displayMenu () is a function used to display the navigation list (this function is omitted here because it is not discussed here)
Onclick specifies the link click event.
Return false: cancels the default behavior of the browser (in this case, displayMenu () is executed without page Jump). This cannot be omitted (you can omit it to try it out, help you understand)
Now let's take a look: If your browser supports javascript, the code after onclick will certainly be executed. Otherwise, the code after onclick will not be executed, and the page will jump. In this way, no matter whether javascript is supported or not, users can access my website smoothly.
The following is another example. It opens a link in a new window, but we didn't specify a target. If your browser does not support javascript, it will open the link on the current page, as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> another method for opening a link in a new window </title>
<Script type = "text/javascript">
Function popup (url) {window. open (url );}
</Script>
</Head>
<Body>
<Ul>
<Li> <a href = "http://www.baidu.com/" onclick = "popup (this. href); return false;"> Baidu </a> </li>
<Li> <a href = "http://www.google.com.hk/" onclick = "popup (this. href); return false;"> google </a> </li>
</Ul>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
