Question

我试图调整一段代码来满足我的需求，遗憾的是我无法达到我想要的目标。

我希望第一个菜单项（soins 1）默认显示为＆＃34; aqua＆＃34;背景和白色字体和其他菜单项（非活动的）红色背景。

然后，当我点击其他菜单项时，我就是＆＃34; aqua＆＃34;要应用于活动的背景（非活动菜单项将为红色）。

我很难在我的CSS代码或JS代码中找到需要修改的内容。如果您单击JSFiddle链接，您将更好地理解我试图解释的内容。非常感谢你的帮助。

HTML：

<div id="carte-des-soins">
    <ul>
        <li><span class="menu-items"><a href="#" data-region="soins-1"> Soins 1</a></span>

        </li>
        <li><span class="menu-items"><a href="#" data-region="soins-2"> Soins 2</a></span>

        </li>
        <li><span class="menu-items"><a href="#" data-region="soins-3"> Soins 3</a></span>

        </li>
        <li><span class="menu-items"><a href="#" data-region="soins-4"> Soins 4</a></span>

        </li>
    </ul>
</div>
<div id="description-des-soins">
    <div id="soins-1" class="textzone">
        <p>Soins 1 blablabla</p>
    </div>
    <div id="soins-2" class="textzone">
        <p>Soins 2 blablabla</p>
    </div>
    <div id="soins-3" class="textzone">
        <p>Soins 3 blablabla</p>
    </div>
    <div id="soins-4" class="textzone">
        <p>Soins 4 blablabla</p>
    </div>
</div>
<p></p>
<br>
<p></p>
<br>
<p></p>
<br>

CSS：

#carte-des-soins {
    text-align: center;
}
#carte-des-soins ul {
    list-style: none;
    padding:0;
}
#carte-des-soins li {
    display: inline-block;
    margin: 0 10px;
    background: red;
}
#carte-des-soins li a {
    text-decoration:none;
    text-align:center;
}
#description-des-soins {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
#soins-1, #soins-2, #soins-3, #soins-4 {
    position: relative;
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 5px 20px 20px 20px;
    color: #333;
    font: 12px'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    line-height: 1px;
}
#soins-2, #soins-3, #soins-4 {
    display: none;
}
#soins-2 p {
    margin-bottom: 5px;
}
#soins-1 p {
    margin-bottom: 5px;
    padding-right: 10px;
}
#soins-1 a {
    color: #3A7CDB;
    text-decoration: none;
}
#soins-1 a:hover {
    text-decoration: underline;
}

JS：

$(document).ready(function () {

    $('.menu-items a:first').css({
        'color': '#fff',
            'background': 'aqua',
            'padding': '20px'
    });

    $('.menu-items a').click(function () {
        var region = $(this).attr('data-region');


        $('.menu-items a').css({
            'color': '#fff',
                'background': 'red',
                'padding': '20px'
        });

        $(this).css({
            'color': '#fff',
                'background': 'aqua',
                'padding': '20px'
        });

        $('.textzone:visible').stop().fadeOut(500, function () {
            $('#' + region).fadeIn(500);
        });

        return false;

    });

})

Answer 1

我相信 this works 的方式。

我已经从JS中获取了颜色和填充声明，并将它们应用于CSS。一般来说，如果你可以帮助它，你应该尽量避免使用JavaScript设置任何CSS，而是使用JavaScript来切换元素上的类，这将产生相同的效果。

#carte-des-soins li a {
  color: #fff;
  text-decoration:none;
  text-align:center;
  padding: 20px;
  background-color: red;
}

在激活时更改菜单项背景的问题

1 个答案: