TAILIEUCHUNG - Tự học HTML và CSS trong 1 giờ - part 50

Tham khảo tài liệu 'tự học html và css trong 1 giờ - part 50', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 466 LESSON 16 Using JavaScript Libraries Modifying Styles on the Page Another powerful feature of jQuery is that it enables you to modify styles on the page on-the-fly. jQuery enables you to modify the page styles indirectly through convenience methods that hide and show elements for example and also enables you to directly modify the page styles. Hiding and Showing Elements For example you can hide and show elements easily based on activity by the user. Here s an example page that swaps out two elements whenever they are clicked DOCTYPE html html head title Anchors title script src type text javascript charset utf-8 script script type text javascript charset utf-8 function closed .hide open closed .click function event open closed .toggle script head body div id open style padding 1em border 3px solid black font-size 300 We are open div div id closed style padding 1em border 3px solid black font-size 300 We are closed div body html The page contains two div s one containing the text We are closed and one containing the text We are open. In the event handler for the document s ready state I hide the div with the ID closed closed .hide That method sets the display style of the elements matched by the selector to none so that when the page finishes loading that div will not be visible as shown in Figure . Download from Modifying Styles on the Page 467 FIGURE The initial state of the page. We are closed is hidden. Then I bind an event handler to the onclick event of those div s containing the following code open closed .toggle As you can see this selector matches both the IDs open and closed and calls the tog-gle method on each of them. That method provided by jQuery displays hidden items and hides items that are being displayed. So clicking the div will cause the other div to appear and hide the one you clicked. After you click the div and the two elements have been toggled the page appears as shown in Figure . FIGURE

• Đồ họa - Thiết kế - Flash
• tự học html và css
• html
• css
• tài liệu html và css
• thiết kế web với html và css