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

先看效果图

 

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>