JS好友列表

最新推荐文章于 2022-11-10 08:40:17 发布

梦想不断超越

最新推荐文章于 2022-11-10 08:40:17 发布

阅读量1.4k

点赞数

分类专栏： Web 文章标签： javascript 好友列表

本文链接：https://blog.csdn.net/lujiachun1/article/details/54834754

版权

Web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>win01</title>
<style type="text/css">
/*使用display属性: 如果取值为none就是隐藏标签*/

table td div {
    display:none;
}

.open {
    display:block;
}
.close {
    display:none;
}
</style>
</head>
<script type="text/javascript">
    function openDiv(a) {
        var targetDiv = a.parentNode.getElementsByTagName("div")[0];
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if (divs[i] == targetDiv) divs[i].className="open";
            else divs[i].className="close";
        }
    }
</script>
<body>
<table>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
            <div>
                秦始皇<br/>
                刘邦<br/>
                李世民<br/>
                康熙<br/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
            <div>
                刘备<br/>
                关羽<br/>
                张飞<br/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
            <div>
                西施<br/>
                貂蝉<br/>
                杨贵妃<br/>
                王昭君<br/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
            <div>
                马云<br/>
                李开复<br/>
                俞敏洪<br/>
                冯危<br/>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

梦想不断超越

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS好友列表

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>win01</title><style type="text/css">/*使用display属性: 如果取值为none就是隐藏标签*/table td div { display:none;}.open {
复制链接

扫一扫