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？

谢谢

Answer 1

不要使用这个：

 $('#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. 

Answer 2

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

不是冒号，逗号

Answer 3

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

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

Answer 4

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

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

Answer 5

我想你也可以使用这个鳕鱼：你可以更好地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>