text_decoration属性在此代码

时间:2016-08-17 11:08:41

标签: javascript html css anchor text-decorations

我想删除#(anchor tag)标签创建的下划线,为此我使用了文本修饰属性,但它不会给我输出我需要的内容。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mango.css">
        <script>
            /* function mangoGrape(selector){
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="block";
                })
             }*/
            function mangoGrape(selector){
             document.querySelectorAll('li')
                .forEach(function(node){
                    node.style.display="none";
                })

            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="block";
                })
         }


        </script>
    </head>
    <body>
        <div id="buttn">
            <ul id="main" onclick="mangoGrape('.apple')">main1
                <div id="pappaya">
                <li class="apple"> <a href="#">sub1</a></li>
                 <li class="apple"><a href="#">sub2</a></li>
                 <li class="apple"><a href="#">sub3</a></li>
                </div>
            </ul>
             <ul id="main" onclick="mangoGrape('.orang')">main2
                <div id="pappayas">
                 <a href="#"><li class="orang">sub21</li></a>
                 <a href="#"><li class="orang">sub22</li></a>
                 <a href="#"><li class="orang">sub23</li></a>
                </div>
            </ul>
        </div>
    </body>    
</html>

的CSS:

#main li{
    list-style-type: none;
    display: none;
    text-decoration: none;
}
#main{
    cursor: pointer;

}
#pappaya {
    background-color:#339933;
     text-decoration: none;
    width: 100%;
    margin-left: -50%;
    padding-left: 50%;
}
 #pappayas {
        background-color:#339933;
      text-decoration: none; 
         width: 100%;
    margin-left: -50%;
    padding-left: 50%;
    }
.orang{
    text-decoration: none;
}
#pappaya li{
    text-decoration: none;
}
.apple{
        text-decoration: none;
    }
#buttn{
     /*margin-left: 94%;*/
    background-color: #023b3b;
        width: 10%;
        /*hyphens: 20%;*/
    height: 100%;
    color: white;
}

我想删除#(anchor tag)标签创建的下划线,为此我使用了文本修饰属性,但它不会给我输出我需要的内容。

2 个答案:

答案 0 :(得分:2)

none应用于anchor代码而不是其他代码:

li a {
    text-decoration: none;
}

答案 1 :(得分:1)

试试这个

#pappaya li a{
text-decoration: none;

}