Question

我正在努力弄清楚当我点击我的＆＃34;左边＆＃34;和＆＃34;中心＆＃34;容器我的＆＃34; footertext＆＃34;更改为红色，当我点击任何容器（左侧和中间）时，它会变回白色

我目前的HTML是：

<p class="footertext" style="color:red">Designed by Clarke Cribb<br></p>


    <div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>

我的Javascript是这样的：

<script>
    $(document).ready(function(){
        $("#left").click(function(){
            $("footertext").css("color","red");
        });
    });
</script>

如果有人可以提供帮助，我会很感激。干杯。克拉克

Answer 1

尝试以下

 <script>

   $(document).ready(function(){
 $("#left,#center").click(function(){ 
  if($(".footertext").css("color") == 'rgb(255, 0, 0)')
  {
    $(".footertext").css("color","white");
  }
  else
  {
    $(".footertext").css("color","red");
  }
});
$("#right").click(function(){
  $(".footertext").css("color","white");
});
 });
</script>

希望它有所帮助！

Answer 2

您可以切换课程。

使用以下CSS：

.red {
    color: red;
}

将你的js改为：

$(function() {
    $("#left,#center,#right").click(function(){
        $(this).toggleClass('red');
    });
});

然后删除HTML上的内联样式。

单击元素时更改字体颜色

2 个答案: