Question

只需要一些帮助就如何更改当前正在选择的div的标题字体颜色。

请参阅下面的代码：

HTML

.ui-radio .ui-btn.ui-radio { 
    position: absolute; 
    vertical-align: top; 
    margin: 0; 
    padding: 0; 
}

JS

<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>

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

Answer 1

我建议你的功能稍有不同。选择.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 }

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

我希望我能帮助你。

如何更改所选div的字体颜色

2 个答案: