jQuery改变HTML元素的风格

我有一个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> 

它改变罚款水平显示CSS的变化

  div#navigation ul li { display: inline-block; } 

但现在我想用jQuery来做,我使用:

  $(document).ready(function() { console.log('hello'); $('#navigation ul li').css('display': 'inline-block'); }); 

但不工作,我有什么样的错误样式我的元素与jQuery?

谢谢

不要使用这个:

 $('#navigation ul li').css('display': 'inline-block'); 

而是使用这个:

 $('#navigation ul li').css('display', 'inline-block'); 

另外,正如其他人所说,如果你想一次做多个CSS变化,那就是当你添加大括号(用于对象符号),它会看起来像这样(如果你想改变,比如说'背景颜色“和”位置“除了”显示“):

 $('#navigation ul li').css({'display': 'inline-block', 'background-color': '#fff', 'position': 'relative'}); //The specific CSS changes after the first one, are, of course, just examples. 
 $('#navigation ul li').css('display', 'inline-block'); 

不是冒号,逗号

 $('#navigation ul li').css({'display' : 'inline-block'}); 

这似乎是一个错字…语法错误:))

你也可以像这样指定多个样式值

 $('#navigation ul li').css({'display': 'inline-block','background-color': '#ff0000', 'color': '#ffffff'}); 

我想你也可以使用这个鳕鱼:你可以更好地pipe理你的class css

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