简单伸缩面板制作(来源于CSS彻底设计与研究)

最新推荐文章于 2024-01-26 11:54:41 发布

天使小宝

最新推荐文章于 2024-01-26 11:54:41 发布

阅读量1.4k

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/myjlvzlp/article/details/8280148

版权

本文介绍了如何使用CSS和JavaScript创建一个基本的伸缩面板（Accordion）效果。通过阅读，你可以学习到如何利用HTML结构、CSS样式以及JavaScript交互来实现这一常见的网页组件。

摘要由CSDN通过智能技术生成

accordion.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>自动伸缩面板</title>
        <link href="pages/accord1/accordion.css" type="text/css" rel="stylesheet">
        <script src="pages/accord1/accordion.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
                <div class="AccordionPanelTab top">Home</div>
                <div class="AccordionPanelContent"><img src="cup.gif">
                    <p>An anchor tag can be used inside of a Collapsible Panel Tab so that the
                        key board focus ring appears *inside* the tab instead of around the tab.
                        This is an example of how to make the text within the anchor tag look
                        like non-anchor (normal) text.This is an example of how to change the appearance of the panel tab that is
                        currently open. The class "CollapsiblePanelOpen" is programatically added and removed
                        from panel.</p>
                </div>
            </div>
            <div class="AccordionPanel">
                <div class="AccordionPanelTab">Web Design</div>
                <div class="AccordionPanelContent">An anchor tag can be used inside of a Collapsible Panel Tab so that the key board focus ring appears *inside* the tab instead of around the tab. This is an example of how to make the text within the anchor tag look like non-anchor (normal) text.This is an example of how to change the appearance of the panel tab that is currently open. The class "CollapsiblePanelOpen" is programatically added and removed from panels as the user clicks on the tabs within the CollapsiblePanel. on the tabs within the CollapsiblePanel
                </div>
            </div>
            <div class="AccordionPanel">
                <div class="AccordionPanelTab">Web Dev</div>
                <div class="AccordionPanelContent">An anchor tag can be used inside of a Collapsible Panel Tab so that the key board focus ring appears *inside* the tab instead of around the tab. This is an example of how to make the text within the anchor tag look like non-anchor (normal) text.This is an example of how to change the appearance of the panel tab that is currently open. The class "CollapsiblePanelOpen" is programatically added and removed from panels as the user clicks on the tabs within the CollapsiblePanel. on the tabs within the CollapsiblePanel
                </div>
            </div>
            <div class="AccordionPanel">
                <div class="AccordionPanelTab">Map</div>
                <div class="AccordionPanelContent">An anchor tag can be used inside of a Collapsible Panel Tab so that the key board focus ring appears *inside* the tab instead of around the tab. This is an example of how to make the text within the anchor tag look like non-anchor (normal) text.This is an example of how to change the appearance of the panel tab that is currently open. The class "CollapsiblePanelOpen" is programatically added and removed from panels as the user clicks on the tabs within the CollapsiblePanel. on the tabs within the CollapsiblePanel
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var Accordion1 = new Spry.Widget.Accordion("Accordion1");
        </script>
    </body>
</html>

accordion.css