CODEWITHSUNDEEP
javascripthtmlcss
Karish Karish
Karish Karish

Reputation: 269

How to make a hyperlink navigation bar active in CSS or javascript?

I am trying to make a navigation bar using css and JavaScript, my code works fine all it does is when the link is clicked the hoover look stays active. is there any other way to accomplish this, because i think my javascript code is not really efficient 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link href="main.css" rel="stylesheet" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">
            window.onload = function() {
                function clicka(num) {
                    console.log(num);
                    if(num == 1){
                        document.getElementById(num).className = 'active';  
                        document.getElementById('2').className = 'unactive'; 
                        document.getElementById('3').className = 'unactive'; 
                        document.getElementById('4').className = 'unactive'; 
                    }
                    else if(num == 2){
                        document.getElementById('1').className = 'unactive';  
                        document.getElementById(num).className = 'active'; 
                        document.getElementById('3').className = 'unactive'; 
                        document.getElementById('4').className = 'unactive'; 
                    }
                    else if(num == 3){
                        document.getElementById('1').className = 'unactive';  
                        document.getElementById('2').className = 'unactive'; 
                        document.getElementById(num).className = 'active'; 
                        document.getElementById('4').className = 'unactive'; 
                    }
                    else if(num == 4){
                        document.getElementById('1').className = 'unactive';  
                        document.getElementById('2').className = 'unactive'; 
                        document.getElementById('3').className = 'unactive'; 
                        document.getElementById(num).className = 'active'; 
                    }
                }
                var a = document.getElementById('click');
                var b = document.getElementById('click2');
                var c = document.getElementById('click3');
                var d = document.getElementById('click4');

                a.onclick = function(){
                    clicka('1');
                }
                b.onclick = function(){
                    clicka('2');
                }
                c.onclick = function(){
                    clicka('3');
                }
                d.onclick = function(){
                    clicka('4');
                }
            }
       </script>   
    </head>
    <body class="body">
        <header class="mainHeader">
            <img src="rrr.jpg">

            <nav><ul>
                    <li class="active" id="1"><a href="#" id="click">Home</a></li>
                    <li class="unactive" id="2"><a href="#" id="click2">About</a></li>
                    <li class="unactive" id="3"><a href="#" id="click3">Portfolio</a></li>
                    <li class="unactive" id="4"><a href="#" id="click4">Contact</a></li>
            </ul></nav>
        </header>




body{
    background-color:#F0F0F0 ;
    color:#000305;
    font-size: 87.5%;
    font-family: Arial,'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

a{
    text-decoration: none;
}

a:link, a:visited{

}

a:hover, a:active{

} 

.body{
    margin:0 auto;
    width:70%;
    clear:both;
}

.mainHeader img{
    width:30%; 
    height:auto;
    margin: 2% 0;
}

.mainHeader nav{
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul{
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li{
    float: left;
    display: inline;
}

.mainHeader nav a:link, .mainHeader nav a:visited{
    color:#fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
    background-color: #cf5c3f;
    text-shadow: none;
}

.mainHeader nav ul li a{
     border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Upvotes: 0

Views: 496

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

Try this:

function clicka(num) {
    var nav = document.getElementById('navbar'), c = nav.children, l = c.length, i;
    for( i=0; i<l; i++) c[i].className = "unactive";
    document.getElementById(num).className = "active";
}

// <ul id="navbar"><li...>...</li></ul>

Much simpler ;)

Upvotes: 1

Related Questions