HTML元素的jQuery的變化風格

我對HTML列表HTML元素的jQuery的變化風格

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

感謝

來源

2013-04-18 MaKo

137

不要使用這樣的：如果你想在一次多個CSS改變

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

而且，正如其他人說，：

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

而是使用，那就是當你添加大括號（用於對象表示法）時，它會看起來像這樣（如果你想改變，比如'background-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.

來源

2013-04-18 14:51:13 VoidKing

或：'$（ '＃導航UL禮'）的CSS（{ '顯示'： 'inline-block的'}）;' - 我經常混用這兩個向上。 – Blazemonger

@Blazemonger LOL，我甚至不知道你可以做到這一點，但現在你提到它，這'確實'是有道理的。感謝您拓寬我的視野。 – VoidKing

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

不是一個冒號，一個逗號

來源

2013-04-18 14:51:27

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

這似乎是一個錯字那裏...語法錯誤:)）

來源

2013-04-18 14:52:22

偉大的抓人 –

你也可以指定這樣

多個樣式值

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

來源

2013-09-02 08:43:51 themis

我想你也可以使用這個鱈魚：，你可以管理你的類的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>

來源

2017-08-01 10:00:41

HTML元素的jQuery的變化風格

回答

相關問題