如何更改所选分区的字体颜色

How to change font color of a selected div

本文关键字：字体颜色分区何更改更新时间：2023-09-26

只需要一些关于如何更改当前所选div的标题字体颜色的帮助。

请参阅下面的代码：

HTML

<div class="bar">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <p  id="hideshow1" class="btn">Photography</p>
                <p  id="hideshow2" class="btn">Graphics</p>
                <hr class="small">
            </div>
        </div>
    </div>
</div>
<div id="photography" class="photography">
    <div class="container">     
        <div class="col-lg-10 col-lg-offset-1 text-center">     
            <hr class="small">
            <div class="row">
                <div class="col-md-3">
                    <div class="photography-item">
                        <div class="thumbnail">
                            <a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>                                         
                        </div>
                     </div>
                 </div>
                 <hr class="small">
            </div>      
        </div>  
    </div>
    <div class="bar">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <p  id="hideshow1" class="btn">Photography</p>
                    <p  id="hideshow2" class="btn">Graphics</p>
                    <hr class="small">
                </div>
            </div>
        </div>
    </div>
    <div id="graphics" class="graphics">
        <div class="container">     
            <div class="col-lg-10 col-lg-offset-1 text-center">     
            <hr class="small">
                <div class="row">
                    <div class="col-md-3">
                        <div class="graphics-item">
                            <div class="thumbnail">
                                <a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>                                         
                            </div>
                         </div>
                    </div>
                    <hr class="small">
                </div>      
            </div>  
     </div>

JS-

$("#hideshow1").click(function(){
    $("#photography").slideToggle("slow");
    $("#graphics").slideUp("slow");
  });
   $("#hideshow2").click(function(){
    $("#graphics").slideToggle("slow");
    $("#photography").slideUp("slow");
  });

我想做的是，当我点击"摄影"时，它会改变字体颜色，当我单击"图形"时，摄影颜色会变回黑色，图形现在将是彩色字体。

function chgfont(type){
    // document.write("<input type='"button'"  id='"hideshow2'" name='"hideshow2'" value='"red'" class='"btn'" onclick='"chgfont('B');'"><input type='"button'"  id='"hideshow1'" name='"hideshow1'" value='"blue'" class='"btn'" onclick='"chgfont('A');'"> ");
  
     if(type=="A"){
       document.getElementById("colorA").style.color ="blue";        
      // document.write("<font color='"blue'">Font colors is blue</font>");
         
     }else{
       document.getElementById("colorA").style.color ="red";     
      // document.write("<font color='"red'">Font colors is red</font>");
     }
}

<div class="bar">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 text-center">
                  <input type="button"  id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
                  <input type="button"  id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
                    <hr class="small">
                  <div id="colorA">
    Colored By Santa
</div>
                </div>
            </div>
        </div>
    </div>

我希望我能帮助你。

我建议您使用一种不同的函数形式。选择.btn元素，然后根据单击的元素获取id并执行操作。

至于字体颜色，写一个css规则，给出所需的颜色，然后简单地从相应的元素中添加或删除这个类：

jQuery

$('.btn').on('click', function() {
   var that = $(this);
   var id = that.attr('id');
   //Remove .colored class form all .btn elements
   $('.btn').removeClass('colored');
   //Add .colored class to the clicked element
   that.addClass('colored');
   var ph = $("#photography");
   var gr = $("#graphics");
   //Permorm the appropriate action depending on the clicked id
   if (id == '#hideshow1') {
      ph.slideToggle("slow");
      gr.slideUp("slow");
   } else if (id == '#hideshow2') {
      gr.slideToggle("slow");
      ph.slideUp("slow");
   }
});

CSS

.colored { color:red }