javascript_10_dom_练习

    
    
    
    
    
    
    
DOM_实例练习
    
    
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：实现类似QQ好友列表效果
     默认情况下：ul中的display: none;
     当点击a时，打开所在的ul,display: block;其他仍然是display: none;
     */
    
    

        

            

                

                    红楼梦
                    

                        
林黛玉
                        
史湘云
                        
薛宝钗
                        
妙玉
                    
                
            
            

                

                    西游记
                    

                        
唐僧
                        
孙悟空
                        
猪八戒
                        
沙和尚
                    
                
            
            

                

                    水浒传
                    

                        
鲁智深
                        
林冲
                        
武松
                        
李逵
                    
                
            
        
    
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：展开列表效果！
         默认情况下：dl的overflow属性值是：hidden;
         当点击dt的时候
         dl的overflow属性值是：visible;
     */
    
    

        
dt定义条目1
        
dd定义描述1—1
        
dd定义描述1—2
        
dd定义描述1—3
        
dd定义描述1—4
    
    

        
dt定义条目2
        
dd定义描述2—1
        
dd定义描述2—2
        
dd定义描述2—3
        
dd定义描述2—4
    
    

        
dt定义条目3
        
dd定义描述3—1
        
dd定义描述3—2
        
dd定义描述3—3
        
dd定义描述3—4
    
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    
    /*
     * 需求：仿造小说网站，大中小字体
     */
    大字体
    中字体
    小字体
    

        小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
        小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
        小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
    
    

以上就是Javascript_10_DOM_练习的内容，更多相关内容请关注PHP中文网（www.php.cn）！

TalkMe

与AI语伴聊天，练习外语口语

下载