js+css 实现tab标签页切换圆角显示效果

最新推荐文章于 2024-07-18 15:46:44 发布

原创最新推荐文章于 2024-07-18 15:46:44 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

js & jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的菜单项选中效果，通过动态调整li元素的边框样式，创建独特的视觉效果。当用户点击某个菜单项时，该菜单项及其相邻的兄弟元素将显示特定的边框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图

html代码部分很简单就是一个li列表

<style type="text/css">
    .main{ float: left;height: 500px;width: 200px;}
    .list{ float: left;}
    .list ul{ padding:0;margin:0; text-align: center;}
    .list li{ list-style: none; width:150px; line-height: 50px; border-right: 1px solid #ccc; cursor:pointer;}
</style>


<div class="list" id="list">
    <ul id="ul">
        <li id="1" onclick="setBorder(this)">menu1</li>
        <li id="2" onclick="setBorder(this)">menu5</li>
        <li id="3" onclick="setBorder(this)">menu5</li>
        <li id="4" onclick="setBorder(this)">menu5</li>
        <li id="5" onclick="setBorder(this)">menu5</li>
        <li id="6" onclick="setBorder(this)">menu2</li>
        <li id="7" onclick="setBorder(this)">menu3</li>
        <li id="8" onclick="setBorder(this)">menu4</li>
        <li id="9" style="height:200px; border-right:1px solid #ccc;"></li>
    </ul>
</div>

<div class="main"></div>

js代码部分主要思路是获取当前点击的li元素的前后兄弟li元素，并设置其样式

<script type="text/javascript">

    function setBorder(obj){
        //alert(obj);
        var pre = obj.previousElementSibling;
        var next = obj.nextElementSibling;

        //清空其他所有li元素的border样式
        setLiStyle();

        //设置当前元素的border样式
        obj.style.borderRight = "none";

        //如果前一个兄弟元素存在，则设置样式
        if(pre){
            //设置前一个兄弟元素的border样式
            pre.style.borderBottom = "1px solid #ccc";
            pre.style.borderBottomRightRadius = "15px";
        }
        //如果后一个兄弟元素存在，则设置样式
        if(next){
            //设置后一个兄弟元素的border样式
            next.style.borderTop = "1px solid #ccc";
            next.style.borderTopRightRadius = "15px";
        }
    }

    function setLiStyle(){
        var liarr=document.getElementById("ul").getElementsByTagName("li");
        //console.log(liarr);return false;
        for(var i=0; i<liarr.length; i++){
            liarr[i].style.border = "";
            liarr[i].style.borderRadius = "";
        }
    }

</script>