Home > Developer > JavaScript
Recently, the original system of * Hai * needs to be improved. Flex may be changed to a combination of flex and JSP to take advantage of the advantages of both. During the past two days, HTML pages are displayed on tabs. The basic information is as follows:
To enhance the user experience on the tab, the background color of the expired tab is more slide. After a tag is selected, the TAG should be integrated with the TAG content. The tab labels can be implemented by using the list. The content of the tab is divided by Div. Only the bottom and bottom borders of the DIV are displayed, and the upper border is displayed by the bottom border of ul, when selecting a tag, you can control the hide of the border under the tag to form a whole between the tag and the TAG content. The code implementation 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">In the above Code, the TAG content uses a DIV, so that each tag has a div. You only need to enter the TAG content in the corresponding Div. In this way, all content is written in an HTML page. You can also place the content of each tab on different HTML pages and use IFRAME to display the content of the Selected tab: <IFRAME id = "osptgt" width = "100%" frameborder = "0" src = "content.html"> </iframe>. Previously, JavaScript was used to control the appearance of a div. Now, JavaScript is used to control pages embedded in IFRAME.
Javascript is an object-based language. It is not an object-oriented language because it does not provide many functions related to object-oriented languages, such as abstraction, inheritance, and overloading. But it treats everything as an object. Another Implementation of the tabs shown below better reflects this: encapsulate all Javascript methods and attributes in a class called neocard, and regard HTML tags as objects, register the mouse event for the Li tag during initialization.
<HTML>There is no essential difference between the two implementation methods. Whether the tab content is aggregated on the same page is the main difference between the two. Which design method is more suitable not only depends on the design principles, but also depends on the actual situation. The interface is only preliminary, and development on the page will be carried out in the future. The design of the former is easier to implement on the interface, and the use of Ajax on the same page in subsequent development may also lead to relatively simple operations, but the interface content is somewhat huge. We also need to test the idea of the former in practice.
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
