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

本文介绍了一种使用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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值