Question

我想在div中使用替代背景颜色。我通过以下代码完成了这项工作：

我希望第一行显示bgcolor，下一行显示替换颜色。

我试过但它没有用。这是代码：

<script type="text/javascript">
    $(document).ready(function() {
        $(".rowBg div:odd").addClass("altBg");
    });
</script>

/*CSS*/
div.rowBg div { clear:both; padding:0; overflow:hidden }
div.altBg {  background-color:#eee !important;  overflow:hidden; padding:5px 0 } 
<!--HTML-->
<div class="rowBg">
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
            <!--Row 2-->
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>

            </ul>           
            </span>
            </div>

            </div>

谢谢，

Answer 1

我已经测试了你发布的HTML / jquery，它正在做你期望的事情。每个奇数Div都有一类altBG。

我建议您的CSS是错误的，但由于尚未发布，我无法确认。如果你改变你的jquery的这一行：

$(".rowBg div:odd").addClass("altBg");

到

$(".rowBg div:odd").css({"background-color":"#ff0000"})

你应该能够看到你的标记和jquery没问题。

希望这有帮助。

Answer 2

您确定添加了jquery库吗？因为您的HTML，CSS和jQuery代码很好，但您需要添加库，您的代码将正常工作。你可以从这里下载jQuery库jQuery

<style type="text/css">
div.rowBg div { clear:both; padding:0; overflow:hidden }
div.altBg {  background-color:#eee !important;  overflow:hidden; padding:5px 0 } 
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".rowBg div:odd").addClass("altBg");
    });
</script>

<div class="rowBg">
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
            <!--Row 2-->
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>

            </ul>           
            </span>
            </div>
<div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
<div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
<div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>

            </div>

如何使用jQuery在div中交替使用背景颜色？

2 个答案: