I have a list on HTML
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul id="pirra">
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
it changes fine to show horizontally on CSS change
div#navigation ul li {
display: inline-block;
}
but now I want to do it with jQuery, I use:
$(document).ready(function() {
console.log('hello');
$('#navigation ul li').css('display': 'inline-block');
});
but is not working, What do i have wrong to style my element with jQuery?
thanks
$('#navigation ul li').css({'display' : 'inline-block'});
It seems a typo there ...syntax mistake :))
changing style with jquery
Try This
$('#selector_id').css('display','none');
You can also change multiple attribute in a single query
Try This
$('#replace-div').css({'padding-top': '5px' , 'margin' : '10px'});
you could also specify multiple style values like this
$('#navigation ul li').css({'display': 'inline-block','background-color': '#ff0000', 'color': '#ffffff'});
I think you can use this code also: and you can manage your class css better
<style>
.navigationClass{
display: inline-block;
padding: 0px 0px 0px 6px;
background-color: whitesmoke;
border-radius: 2px;
}
</style>
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul id="pirra">
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#navigation ul li').addClass('navigationClass'); //add class navigationClass to the #navigation .
});
</script>
$('#navigation ul li').css('display', 'inline-block');
not a colon, a comma
Source: Stackoverflow.com