jQuery改变HTML元素的风格

Question

我有一个关于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');

另外,正如其他人所说,如果你想同时进行多个css更改,那就是你要添加花括号(用于对象表示法),它会看起来像这样(如果你想改变,比方说'背景' -color'和'position'以及'display'):

$('#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'});