网站列表展示(不同类型的排行榜制作)

小鱼儿 2021-12-24 07:19 154阅读 0赞

## 网站列表展示 ##

**功能实现**  
1、选项卡功能实现（鼠标事件触发选择区，内容区出现对应的内容）  
2、鼠标移入到内容区，对应内容显示详情（：hover）  
![类别选择效果展示][201906262137225.png]![划入细节展示][20190626213829194.png]

//HTML（tabContebt中的所有ul对应都有10个li显示内容，为让读者更方便学习，故省略）

<body>
    	<div id="ranking">
    		<h2>观看排行榜</h2>
            <ul id="tabNav">
                <li class="active">每日</li>
                <li>每周</li>
                <li>全部</li>
            </ul>
            <div id="tabContent">
                <ul id="daily" class="show">
                    <li> 
                        <span>1</span> 
                        <a href="#" onclick = "javascript:">解密：关于地球与人类的一千零一问</a>
                        <div>
                            <img src="5-img/pen.png" alt="pen">
                            <p>
                               解密：关于地球与人类的一千零一问1 
                            </p>
                            <a href="#">播放</a>
                        </div>
                    </li>
                    
                    <li>
                        <a href="#">更多>></a>
                    </li>
                </ul>
                <ul id="monthly" >
                    <li>  
                        <span>1</span>
                        <a href="#" onclick = "javascript:">每月：关于地球与人类的一千零一问</a>
                        <div>
                            <img src="5-img/pen.png" alt="pen">
                            <p>
                               解密：关于地球与人类的一千零一问 
                            </p>
                            <a href="#">播放</a>
                        </div>
                    </li>
                    
                    <li>
                        <a href="#">更多>></a>
                    </li>
                </ul>
                <ul id="all" >
                    <li>  
                        <span>1</span>
                        <a href="#" onclick = "javascript:">全部：关于地球与人类的一千零一问</a>
                        <div>
                            <img src="5-img/pen.png" alt="pen">
                            <p>
                               解密：关于地球与人类的一千零一问 
                            </p>
                            <a href="#">播放</a>
                        </div>
                    </li>
                    
                    <li>
                        <a href="#">更多>></a>
                    </li>
                </ul>
            </div>
    	</div>
    </body>

//js

. \}  
\}  
\}  
for( var i = 0 ; i < tabContent.length ; i++)\{  
hover( tabContent\[i\].children);  
\}

[201906262137225.png]: https://img-blog.csdnimg.cn/201906262137225.png
[20190626213829194.png]: /images/20211223/93a418b428f74d0c8492b3519b79c6ab.png