javascript - CSS color property not working -


i having trouble changing color property of link when class changed. here code

<div id="information">     <ul class="pagination">         <li><a href="#"><span>administration</span><small>learn site administration</small></a></li>         <li><a href="#"><span>management</span><small>learn access management</small></a></li>         <li><a href="#"><span>dashboard</span><small>learn dashboard functions</small></a></li>         <li><a href="#"><span>visitors</span><small>learn visitor management</small></a></li>                             </ul> </div>

this html code using create list no inline style or else.

now here css.

#information { width: 1000px; height: 350px; margin: 0 auto; background:url(../images/information-bg.jpg) no-repeat 25px 5px; } #information ul{     list-style: none;     margin: 0;     padding: 0; } #information ul.pagination{     float: left;     list-style:none;     padding:0;     margin:0;     width:246px;     height:350px;     background:url(../images/pagination-bg.jpg) no-repeat left top; } #information ul.pagination li {     padding:5px 0 0 5px;     margin-bottom:-5px; } #information ul.pagination li {     width:270px;     height:85px;     background-repeat:no-repeat;     background-position:left -85px;     background-image:url(../images/thumb-sprite.png);     text-decoration:none;     display:block;     color: #464646; } #information ul.pagination li.current {     background-position:left top;     color: white; } #information ul.pagination li span {     font-size: 26px;     line-height: 1.2em;     display: block;     padding: 14px 0 0 0; } #information ul.pagination li small {     display:inline-block;     color:#428301;     background-repeat:no-repeat;     background-position:right -80px;     background-image:url(../images/arrows.gif);     padding:0 17px 0 0;     font-size: 10px; } #information ul.pagination li.current small {     font-size: 10px;     color: #89c100;     background-position:right 5px; } #information ul.pagination li span, #information ul.pagination li small {     padding-left:40px; }

currently no element have class .current add class first element through script , , here script

$("document").ready(function(){      //adding class pagination , showing first image     var currentpagination = $("ul.pagination li:eq(0)").addclass("current");     var currentslide = $("ul.slides li:eq(0)").fadein(2000);           //on click of pagination link, changing background of pagination , anmating new slide     $("ul.pagination li").click(function (){                    currentpagination.removeclass("current");                 currentpagination = $(this).addclass("current");                       var ul = $(this).parent();         var index = ul.children().index(this);     });  });

the dilemma here that, background of li class = current changing correctly color property of element not changing, can see in css property of ( #information ul.pagination li.current ), dont know whats wrong it, have been stuck long decided ask of forum.

please note script working fine because background changing perfectly. @ start of webpage li current class has color #fff doesnt work afterwards, appreciated.

p.s here url in can see works fine @ start after background image positioning changes color not

enter image description here

its working perfectly. can see in jsfiddle http://jsfiddle.net/banded_krait/m9kv9/1/

if it's still not working in code try put !important css.

#information ul.pagination li.current {     background-position:left top;     color: red !important; }

for subtitle color put css

#information ul.pagination li.current small {     color: red !important; }

i updated jsfiddle. please see. changed color white red see it's working or not.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more