Question

我的客户希望我页面中的按钮背景颜色自动切换到显示的div元素的背景颜色。无论如何用CSS做这个或者我必须使用jQuery吗？

我的HTML

<h1>news</h1>
<div class="items">
    <div class="item-1" style="display: none;">
        <h2>News item 1</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item-2" style="display: none;">
        <h2>News item 2</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item-3" style="display: none;">
        <h2>News item 3</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item-4" style="display: block;">
        <h2>News item 4</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item-5" style="display: none;">
        <h2>News item 5</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
</div>
<button>back</button>

我的CSS

body
    {    
        font-family: arial;
        font-size: 11px;
        color: #333;
    }

h1, button
    {    
        text-transform: uppercase;
    }

.items
    {    
        color: #fff;
    }

.item-1 h2, .item-1 p
    {    
        background: #c00;
    }

.item-2 h2, .item-2 p
    {    
        background: #0c0;
    }

.item-3 h2, .item-3 p
    {    
        background: #00c;
    }

.item-4 h2, .item-4 p
    {    
        background: #00c;
    }

.item-5 h2, .item-5 p
    {    
        background: #333;
    }

button
    {    

    }

My JSFIDDLE

Answer 1

您可以将按钮移动到包装div中，然后将一个类应用于该包装器，该类将更改传播到新闻项和按钮：

<h1>news</h1>
<div class="items color-1">
    <div class="item" style="display: none;">
        <h2>News item 1</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item" style="display: none;">
        <h2>News item 2</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item" style="display: none;">
        <h2>News item 3</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item" style="display: block;">
        <h2>News item 4</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <div class="item" style="display: none;">
        <h2>News item 5</h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam. </p>  
    </div>
    <button>back</button>
</div>

然后在你的CSS中：

.color-1 .item h2, .color-1 .item p, .color-1 button
{    
    background: #c00;
}

.color-2 .item h2, .color-2 .item p, .color-2 button
{    
    background: #0c0;
}

# Etc...

这有助于改善课程的使用。基本上：你真的不想要像“item-1”，“item-2”这样的独特类，等等id更适合你，因为你应该只使用一个id一段时间，而class可以重复使用。

Answer 2

为了保持原样，你必须制作一些JS。这是一个解决方案，用于设置当前<div>的按钮颜色，其中包含display: block

$('button').css('background-color', $('.items > div[style="display: block;"] > h2').css('background-color'))

有按钮切换背景颜色到显示元素的背景颜色

2 个答案:

的 JSFiddle Link