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

我正在尝试调整一段代码以满足我的需求，不幸的是我无法完全实现我想要的。

我希望第一个菜单项（soins 1）默认以"aqua"背景和白色字体显示，其他菜单项（非活动菜单项）以红色背景显示。

然后，当我单击其他菜单项时，我将"aqua"背景应用于活动背景（非活动菜单项将为红色）。

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

http://jsfiddle.net/rk8rmwca/

.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;
    });
})