jquery更改一個特定的html元素的一個css屬性

我已經看過，但還沒有找到改變只有一個屬性的具體答案。這裏是我煮熟的一個例子：我只想改變顯示屬性。jquery更改一個特定的html元素的一個css屬性

<html> 
    <head> 
     <title> 
      test 
     </title> 
     <style type="text/css"> 
      *{ 
       margin: 0px; 
       padding: 0px; 
      } 
      a.move { 
       height: 25px; 
       width: 25px; 
       display: inline-block; 
       border: 1px #aaa solid; 
       border-radius: 5px; 
       text-align: center; 
       text-decoration: none; 
       color: black; 
      } 
      a.move:hover { 
       background-color: #aaa; 
      }

--- V本是最重要的CSS部分

  li { 
       display: inline-block; 
       width: 370px; 
       border: 1px #aaa solid; 
      }

--- V本是最重要的CSS部分

 </style> 
     <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript"> 
      var current = 1; 
      var wait = 0; 
      function next(){ 
       current++; 
       update(); 
      } 
      function prev(){ 
       current--; 
       update(); 
      }

--- V本是重要的jQuery部分

  function update(){ 
       $('p').text(current); 
       $('li').each(function(index) { 
        if(index != current) 
         $(this).css('display','none'); 
        else 
         $(this).css('display','inline'); 

       }); 
      }

結束重要的p藝術---^

  $(function(){ 
       update(); 
       $('a.move.left').click(function(e){ 
        if(wait) return; 
        e.preventDefault(); 
        prev(); 
       }); 
       $('a.move.right').click(function(e){ 
        if(wait) return; 
        e.preventDefault(); 
        next(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <p> ... </p> 
     <a class="move left" href="a">&lt;</a>&emsp;<a class="move right" href="b">&gt;</a></br> 
     <ul> 
      <li>123</li><!-- 
      --><li>123</li><!-- 
      --><li>456</li><!-- 
      --><li>789</li><!-- 
      --><li>abc</li><!-- 

      --><li>edf</li><!-- 
      --><li>ghj</li><!-- 
      --><li>[email protected]#</li><!-- 
      --><li>$%^</li><!-- 
      --><li>ABC</li> 
     </ul> 
    </body> 
</html>

請指教。目前，發生的是它刪除了所有其他的CSS屬性。我可以每次都設置所有的屬性，但我不想。

感謝

來源

2012-06-19 zehelvion

不太明白你想改變哪個li，但是你正在使用改變每個li元素的每個函數。 –

您能否更詳細地解釋_「刪除所有其他CSS屬性」_部分問題？這似乎是確定的[**這個演示**]（http://jsfiddle.net/znGM7/） – andyb

直接修改css（大多數情況下）不是一個好的選擇。

，而不是要麼使用：

$(this).show()和$(this).hide()

或（我的個人偏好，因爲這是更靈活）：

$(this).toggleClass("...")並根據創建CSS類在樣式表。

另外，你正在改變所有你的css li項目：$('li').each - 這真的是你想要的嗎？

.css()方法只改變您指定的CSS屬性 - 它不會覆蓋其他樣式。如果這似乎是這種情況，那麼問題可能在於你的代碼中的其他地方。

來源

2012-06-19 08:53:09 Christoph

是的，我改變了內聯，而不是回到內聯塊，我很驚訝，我失去了寬度。感謝:) – zehelvion

謝謝，這有助於清除我的困惑 – zehelvion

我也注意到我不需要迭代.each，並可以簡單地使用eq（）選擇器 – zehelvion

取而代之的是，爲什麼現在使用：

$（本）.show（）或$（本）.hide（）根據需要... OT $（本）.toggle （）....

來源

2012-06-19 08:51:32 Brian

在jQuery中，你可以隱藏或顯示使用的元素：改變CSS的

$(this).show()或$(this).hide()來代替。

來源

2012-06-19 08:52:54

使用

$(this).toggle()

或者如果你想顯示或隱藏使用顯示和隱藏，你需要的。

$(this).show() 
$(this).hide()

來源

2012-06-19 09:06:42 Asif

jquery更改一個特定的html元素的一個css屬性

回答

相關問題