<div class="layerBar-clothL">

                <p>1F</p><a href="#"><h3>服装鞋包</h3></a>

             </div>

             <span class="layerBar-clothR">

                <span class="dapai" style="color: red">大牌</span><i>|</i>

                <span class="man">男装</span><i>|</i>

                <span class="women">女装</span>

             </span>  

这是部份HTML

$('.man').click(function(){

$('.man').css({'color':'red'});

$('.women').css({'color':'black'});

$('.dapai').css({'color':'black'});

$('.cloth-pic').hide();

$('.hide').show();

$('.hide1').hide();

})

$('.women').click(function(){

$('.women').css({'color':'red'});

$('.men').css({'color':'black'});

$('.dapai').css({'color':'black'});

$('.cloth-pic').hide();

$('.hide1').show();

$('.hide').hide();

})

$('.dapai').click(function(){

$('.dapai').css({'color':'red'});

$('.men').css({'color':'black'});

$('.women').css({'color':'black'});

$('.cloth-pic').show();

$('.hide').hide();

$('.hide1').hide();

})

这个是js代码。

对这三个标签都设置了不同的ID，每个都有点击事件。当点击某个标签时，他的颜色是红色的，并显示内容，而其余是黑色，隐藏的。（在没点击时当前第一个标签为默认的那个为红色字，所以在html有一个style:red）上面得脚本能对应显示，但是出现问题是，点击第一个标签是红色，在点第二个时也变成了红色,此时原来的那个为黑色，在进行切换点击时都变成红色。显示效果是有两个红色标签。对上面得代码怎么去改。思路错了吗？