CSS 实现选项卡消息框和固定列表消息盒子

最新推荐文章于 2023-03-22 22:22:19 发布

cellinlab

最新推荐文章于 2023-03-22 22:22:19 发布

阅读量833

点赞数

分类专栏： CSS 前端基础文章标签： CSS选项卡 CSS CSS消息列表 CSS基础 CSS入门

本文链接：https://blog.csdn.net/funkstill/article/details/88987424

版权

前端基础同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

CSS

29 篇文章 0 订阅

订阅专栏

选项卡消息框

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position案例</title>
        <style>
            html {
                font-family: sans-serif;
            }
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;/*去掉body默认外边距*/
            }
            .info-box {
                width: 450px;
                height: 400px;
                margin: 0 auto;/*上下为零，左右auto即相同，则为居中*/
            }
            .info-box ul {/*需覆盖继承的父类样式*/
                padding-left: 0;
                margin-top: 0;
            }
            .info-box li {
                float: left;
                list-style-type: none;
                width: 150px;
            }
            .info-box li a {
                display: inline-block;
                text-decoration: none;
                width: 100%;
                line-height: 3;
                background-color: red;
                color: black;
                text-align: center;
            }
            /*给选项按钮添加样式*/
            .info-box li a:focus,.info-box li a:hover {
                background-color: #a60000;
                color: white;
            }
            .info-box li a.active {
                background: #a60000;
                color: white;
            }
            /*样式化面板*/
            .info-box .panels {
                height: 352px;
                position: relative;
                clear: both;
            }
            .info-box article {
                position: absolute;
                top: 0;
                left: 0;
                height: 352px;
                padding: 10px;
                color: white;
                background-color: #a60000;
            }
            /*使被选页面位于上层*/
            .info-box .active-panel {
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <section class="info-box">
            <ul>
              <li><a href="#" class="active">Tab 1</a></li>
              <li><a href="#">Tab 2</a></li>
              <li><a href="#">Tab 3</a></li>
            </ul>
            <div class="panels">
              <article class="active-panel">
                <h2>The first tab</h2>
          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
              </article>
              <article>
                <h2>The second tab</h2>
          
                <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
              </article>
              <article>
                <h2>The third tab</h2>
          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
          
                <ol>
                  <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
                  <li>Aliquam ut porttitor urna.</li>
                  <li>Nulla facilisi</li>
                </ol>
              </article>
            </div>
        </section>
        <script>
            var tabs = document.querySelectorAll('.info-box li a');
            var panels = document.querySelectorAll('.info-box article');
            for(i=0;i<tabs.length;i++){
                var tab = tabs[i];
                setTabHandler(tab,i);//给每个tab按钮绑定onclick
            }
            function setTabHandler(tab,tabPos){
                tab.onclick = function(){
                    //移除所有tab样式
                    for(i=0;i<tabs.length;i++){
                        if(tabs[i].getAttribute('class')){
                            tabs[i].removeAttribute('class');
                        }
                    }
                    //设置点击tab的样式
                    tab.setAttribute('class','active');
                    //移除所有页面样式
                    for(i=0;i<panels.length;i++){
                        if(panels[i].getAttribute('class')){
                            panels[i].removeAttribute('class');
                        }
                    }
                    //设置选中tab的页面样式
                    panels[tabPos].setAttribute('class','active-panel');
                }
            }
        </script>
    </body>
</html>

效果：

固定消息列表

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position案例</title>
        <style>
            html {
                font-family: sans-serif;
            }
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;/*去掉body默认外边距*/
            }
            .info-box {
                width: 450px;
                height: 400px;
                /*
                margin: 0 auto;
                上下为零，左右auto即相同，则为居中
                */
                position: fixed;
                top: 0;
            }
            .info-box ul {/*需覆盖继承的父类样式*/
                padding-left: 0;
                margin-top: 0;
            }
            .info-box li {
                float: left;
                list-style-type: none;
                width: 150px;
            }
            .info-box li a {
                display: inline-block;
                text-decoration: none;
                width: 100%;
                line-height: 3;
                background-color: red;
                color: black;
                text-align: center;
            }
            /*给选项按钮添加样式*/
            .info-box li a:focus,.info-box li a:hover {
                background-color: #a60000;
                color: white;
            }
            .info-box li a.active {
                background: #a60000;
                color: white;
            }
            /*样式化面板*/
            .info-box .panels {
                height: 352px;
                position: relative;
                clear: both;
            }
            .info-box article {
                position: absolute;
                top: 0;
                left: 0;
                height: 352px;
                padding: 10px;
                color: white;
                background-color: #a60000;
            }
            /*使被选页面位于上层*/
            .info-box .active-panel {
                z-index: 1;
            }

            /*固定消息列表盒子*/
            .fake-content {
                background-color: #a60000;
                color: white;
                padding: 10px;
                height: 2000px;
                margin-left: 470px;
            }
        </style>
    </head>
    <body>
        <section class="fake-content">
            <h1>Fake content</h1>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
            <p>This is fake content. Your main web page contents would probably go here.</p>
        </section>
        <section class="info-box">
            <ul>
              <li><a href="#" class="active">Tab 1</a></li>
              <li><a href="#">Tab 2</a></li>
              <li><a href="#">Tab 3</a></li>
            </ul>
            <div class="panels">
              <article class="active-panel">
                <h2>The first tab</h2>
          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
              </article>
              <article>
                <h2>The second tab</h2>
          
                <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
              </article>
              <article>
                <h2>The third tab</h2>
          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
          
                <ol>
                  <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
                  <li>Aliquam ut porttitor urna.</li>
                  <li>Nulla facilisi</li>
                </ol>
              </article>
            </div>
        </section>
        <script>
            var tabs = document.querySelectorAll('.info-box li a');
            var panels = document.querySelectorAll('.info-box article');
            for(i=0;i<tabs.length;i++){
                var tab = tabs[i];
                setTabHandler(tab,i);//给每个tab按钮绑定onclick
            }
            function setTabHandler(tab,tabPos){
                tab.onclick = function(){
                    //移除所有tab样式
                    for(i=0;i<tabs.length;i++){
                        if(tabs[i].getAttribute('class')){
                            tabs[i].removeAttribute('class');
                        }
                    }
                    //设置点击tab的样式
                    tab.setAttribute('class','active');
                    //移除所有页面样式
                    for(i=0;i<panels.length;i++){
                        if(panels[i].getAttribute('class')){
                            panels[i].removeAttribute('class');
                        }
                    }
                    //设置选中tab的页面样式
                    panels[tabPos].setAttribute('class','active-panel');
                }
            }
        </script>
    </body>
</html>