Search code examples
javascripthtmlcssanchortext-decorations

the text_decoration property is not working properly in this code

i want to remove the underline created by #(anchor tag) tag,for that purpose i'm used the text decoration property,but it will not give me the output what i need.

<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;
}

i want to remove the underline created by #(anchor tag) tag,for that purpose i'm used the text decoration property,but it will not give me the output what i need.

Solution

  • Apply none to anchor tag rather than to the other tags:

    li a {
    text-decoration: none;
}