CODEWITHSUNDEEP
javascripthtmlasp.netcss
Vishweshwar Kapse
Vishweshwar Kapse

Reputation: 939

Not able to set CSS style of an element in javascript

hi i have an unordered list with some list elements and i want to set a css style for highlighting the list element that has been selected i am trying this but it has no effect on the style

function SelectThis(ctrl) {
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');

    for (i = 0; i < list.length; i++) {
        list[i].style.color = "blue";
    }

    ctrl.style.color = 'white';
}

and my html looks like this

<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
        <li onclick="SelectThis(this);"><a href="Dashboard.aspx">Dashboard</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Geofence.aspx">Geofence</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Personnel.aspx">Personnel</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

this div tag is inside another div tag, cant i somehow over-ride the inner div tag to cause changes to the selected li in the Ul

and my css is like this

.jqueryslidemenu ul li a:hover{
 background: black; /*tab link background during hover state*/
  color: Yellow;
  }

.jqueryslidemenu{
font: bold 12px Arial;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
height: 1%;
}

Upvotes: 0

Views: 2191

Answers (3)

sangram parmar
sangram parmar

Reputation: 8726

what you are trying is not working because your page is refresh

for i.e. if you click link than browser will redirect you that link

so after click on page load you can check current page and find link in your menu and give css to that

put this script in your page

    $(document).ready(function () {
        var page = top.location.toString().split("/");
        alert(page[page.length - 1].toString());
        $('#myslidemenu li').css('color', 'blue');
        $('#myslidemenu').find('a[href="' + page[page.length - 1].toString() + '"]').closest('li').css('color', 'white');

    });

on document ready it takes page name and find anchor tag containing href= current page and change it's closest li color;

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

You should change style of <a> element instead of <li>. Style of <li> is updated but <a> has its own style which should be overridden with JS.

Upvotes: 2

maqjav
maqjav

Reputation: 2434

Are you trying to change the background instead? Like that?

I removed in the test the anchors so it doesn't produce 404 errors.

function SelectThis(ctrl) {                         
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');

    for (i = 0; i < list.length; i++) {
        list[i].style.background = 'blue';
    }

    ctrl.style.background = 'white';
}

Upvotes: 0

Related Questions