Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
        <div class="title">
            <ul>
                <li><a href="#">收藏最多</a></li>
                <li><a href="#">热门话题</a></li>
                <li><a href="#">猜你喜欢</a></li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li>
                    <span>1</span><a href="#">我花了3天时间,为你整理了这份超全面的 B 站免费学设计指南</a>
                </li>
                <li><span>2</span><a href="#">为什么你的 PS 越用越快,但设计水平一直没有提升?</a></li>
                <li><span>3</span><a href="#">比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)</a></li>
                <li><span>4</span><a href="#">标题文字如何处理更吸引人?来看设计高手的实用技巧!</a></li>
                <li><span>5</span><a href="#">为什么你的界面看着不舒服?腾讯设计师从这 3 个维度优化设计!</a></li>
                <li><span>6</span><a href="#">平面高手课堂!用一篇干货帮你彻底全面掌握「投影」知识点!</a></li>
                <li><span>7</span><a href="#">我花了3天时间,整理了这15个「特别好」的免费可商用图库!</a></li>
                <li><span>8</span><a href="#">提高求职成功率?这份大厂设计师出品的面试指南刚好用得上!</a></li>
            </ul>
            <ul>
                <li><span>1</span><a href="#">吃货小哥哥小姐姐,求推荐武汉好吃好喝的地儿,地儿,地儿…</a><i>08/08</i></li>
                <li><span>2</span><a href="#">Photoshop里面有没有什么能像Sketch Mirror一样在手机上能实时浏览设计稿</a><i>08/07</i></li>
                <li><span>3</span><a href="#">你的设计师工作台是这样的吗?</a><i>08/06</i></li>
                <li><span>4</span><a href="#">28岁的“中年设计”要遇到职业危机了吗?</a><i>08/05</i></li>
                <li><span>5</span><a href="#">最近很迷茫,从业几年,但很多东西还是不会,该怎么做?</a><i>08/04</i></li>
                <li><span>6</span><a href="#">有没有郑州的小伙伴每个月5000多的房贷跳槽的?</a><i>08/03</i></li>
                <li><span>7</span><a href="#">有没有非校招进腾讯的设计师分享一下经验呢?</a><i>08/02</i></li>
                <li><span>8</span><a href="#">大型认领现场!能在这些图里找到你户外改稿经历吗?</a><i>08/01</i></li>
            </ul>
            <ul>
                <li><span>1</span><a href="#">PS教程!教你打造超酷炫的德罗斯特效应</a><i>08/08</i></li>
                <li><span>2</span><a href="#">拍一张照片就能设计成一张海报,这种技能你想不想要?</a><i>08/07</i></li>
                <li><span>3</span><a href="#">如何用产品开发三原则模型,帮我们做好产品设计</a><i>08/06</i></li>
                <li><span>4</span><a href="#">像鲶鱼一样的活着!成为设计师10年后的经验心得</a><i>08/05</i></li>
                <li><span>5</span><a href="#">每月更新!10个记忆深刻的产品设计神细节!</a><i>08/04</i></li>
                <li><span>6</span><a href="#">最近超火的PD和UXD你该选哪个?我来告诉你!</a><i>08/03</i></li>
                <li><span>7</span><a href="#">入门级小白教程!如何拍摄不游客的游客照?</a><i>08/02</i></li>
                <li><span>8</span><a href="#">非科班福音!设计师如何判断自己是否擅长绘画?(附自学方法)</a><i>08/01</i></li>
            </ul>
        </div>
    </div>
            
          
!
            
               * {
            box-sizing: border-box;
        }

        body,
        ul,
        li {
            margin: 0;
            padding: 0;

        }

        li {
            list-style: none;
        }

        a {
            color: #8a8a8a;
            text-decoration: none;
        }

        a:hover {
            color: #333;
        }

        .hidden {
            display: none;
        }

        .container {
            width: 270px;
            margin: 20px auto;
        }

        .title {
            margin-bottom: 12px;
        }

        .title ul {
            display: flex;
        }

        .title li {
            flex-basis:33.33%;
            background-color: #f2f2f2;
            padding: 10px 13px;
            font-size: 0.875rem;
            text-align: center;
        }

        .title li.active {
            background-color: #fe4800;
        }

        .title li.active a {
            color: #fff;
        }

        .content li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.875rem;
        }

        .content span {
            background-color: #c8c7c7;
            border-radius: 3px;
            color: #fff;
            font-size: 0.75rem;
            padding: 1px 6px;
            text-align: center;
            margin-right: 5px;


        }

        .content a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }

        .content li:nth-child(-n+3) span {
            background-color: #fe4800;
            color: #fff;
        }

        .content i {
            font-style: normal;
            font-size: 0.75rem;
            color: #d3d3d3;
            padding-left: 5px;
        }
            
          
!
            
              var oLi = document.querySelectorAll(".title li");
        var oUl = document.querySelectorAll(".content ul");
        // console.log(oUl);

        //初始化
        var num = 0;
        var oldLi = null;
        oLi[num].classList.add("active");
        oldLi = oLi[num];
        oUl.forEach(function (item, index) {
            if (!(num == index)) {
                item.classList.add("hidden");
                // console.log(index);
            }
        })

        oLi.forEach(function (item, index) {
            item.onmouseover = function () {
                /*  oLi.forEach(function (item) {
                     item.classList.remove("active");
                 }) */
                oldLi.classList.remove("active");
                this.classList.add("active");
                oldLi = this;
                //  先把所有ul隐藏
                oUl.forEach(function (item) {
                    item.classList.add("hidden");
                })
                // 再把鼠标经过的那个li对应的ul显示
                oUl[index].classList.remove("hidden");

            }
        })
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console