自适应宽度的标签导航

最新推荐文章于 2021-10-14 11:33:34 发布

wem520

最新推荐文章于 2021-10-14 11:33:34 发布

阅读量745

点赞数

分类专栏： js css 文章标签： javascript scroll float tags function url

本文链接：https://blog.csdn.net/wem520/article/details/6909464

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

 <style type="text/css">
        BODY
        {
            font-family: "宋体";
        } 
        #tags
        {
            padding-right: 0px;
            padding-left: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 0px 10px;
            width: 400px;
            padding-top: 0px;
            height: 23px;
        }
        #tags LI
        {
            background: url(../../images/tagleft.gif) no-repeat left bottom;
            float: left;
            margin-right: 1px;
            list-style-type: none;
            height: 23px;
        }
        #tags LI A
        {
            padding-right: 10px;
            padding-left: 10px;
            background: url(../../images/tagright.gif) no-repeat right bottom;
            float: left;
            padding-bottom: 0px;
            color: #999;
            line-height: 23px;
            padding-top: 0px;
            height: 23px;
            text-decoration: none;
        }
        #tags LI.emptyTag
        {
            background: none transparent scroll repeat 0% 0%;
            width: 4px;
        }
        #tags LI.selectTag
        {
            background-position: left top;
            margin-bottom: -2px;
            position: relative;
            height: 25px;
        }
        #tags LI.selectTag A
        {
            background-position: right top;
            color: #000;
            line-height: 25px;
            height: 25px;
        }
    </style>

    <script language="javascript"> 
        function selectTag(selfObj) {
            // 操作标签
            var tag = document.getElementById("tags").getElementsByTagName("li");
            var taglength = tag.length;
            for (i = 0; i < taglength; i++) {
                tag[i].className = "";
            }
            selfObj.parentNode.className = "selectTag";
        }
    </script>

 <div id="linkinfos" style="width: 100%; font-size: 10pt; font-weight: bold;" align="left">
        <ul id="tags">
            <li class="selectTag"><a οnclick="selectTag(this)" href="CaseMeg.aspx" target="maincenter">
                案件消息</a> </li>
            <li><a οnclick="selectTag(this)" href="ReceiveMeg.aspx" target="maincenter">我的消息</a>
            </li>
            <li><a οnclick="selectTag(this)" href="SentMeg.aspx" target="maincenter">已发送</a>
            </li>
            <li><a οnclick="selectTag(this)" href="SendMeg.aspx" target="maincenter">发送消息</a>
            </li>
        </ul> 
    </div>