(js)使用列表完成选项卡的标题

来源：互联网发布：维普期刊数据库编辑：程序博客网时间：2024/06/16 07:08

1 .

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            ul li {                float: left;                width: 100px;                height: 30px;                border: 1px solid red;                list-style-type: none;                text-align: center;                line-height: 30px;            }            /*选项卡标题选：中的样式*/            .select_bg {                background-color: pink;             }            div {                width: 304px;                height: 300px;                display: none;                border: 1px solid green;                margin-left: 40px;                clear: both;            }            .select {                display: block;            }        </style>        <script>            function changePos(pos) {                /*1.查找出所有li*/                var lis = document.getElementsByTagName("li");                var divs = document.getElementsByTagName("div");                for(var i = 0; i < lis.length; i++) {                    if(i == pos) {                        /*选中                         选中的标题背景粉色，内容div选中的显示                        换句话说，选中的class属性值都是select(div)或者select_bg(li)                         * */                        lis[i].className = "select_bg";                        divs[i].className = "select";                    } else {                        /*没选中，默认页面： 没选中的标题背景默认白色，内容div没选中的隐藏                         *                          * 换句话说，没选中的class属性值都是空的                         */                        lis[i].className = "";                        divs[i].className = "";                    }                }            }        </script>    </head>    <body>        <!--1.使用列表完成选项卡的标题-->        <ul>            <li class="select_bg" onclick="changePos(0)">JavaEE</li>            <li onclick="changePos(1)">Python</li>            <li onclick="changePos(2)">大数据</li>        </ul>        <div class="select">JavaEEJavaEEJavaEE</div>        <div>PythonPythonPythonPython</div>        <div>大数据大数据大数据大数据大数据</div>    </body></html>

总结:

如果给特定的div li标签设置class的属性值,用
lis[i].className = “select_bg”;
divs[i].className = “select”;
关于display的一些属性:none,block,inline
block:　block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度div, p,h1, form, ul 和 li这些标签都是块元素的例子。
display:inline就是将元素显示为行内元素.
　　inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　span, a, label, input, img, strong 和em是inline元素的例子。

阅读全文

0 0