How to higlight onclick numbers H2 background color or Text in H2

Question

How to higlight H2 background color or Text in H2 if I click on numbers 1, 2, 3

This code I use for Quiz system.

If I click on numbers on page, posiotion moved corresponding H2

$(document).on('click', 'a[href^="#"]', function(e) {
    var id = $(this).attr('href');
    
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }
    
    e.preventDefault();
    
    var pos = $id.offset().top - 40;
    
    $('body, html').animate({scrollTop: pos});
});

#fora {
position:fixed;
}
#mydiv {
height:1000px;
}
#divforh {
padding-top: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
</html>
<body>
<div id="fora">
<a href="#1">1</a>,
<a href="#2">2</a>,
<a href="#3">3</a>.
</div>
    
<div id="mydiv">   
<div id="divforh">
<li><h2 id="1">1. Text 1...</h2></li>

<li><h2 id="2">2. Text 2...</h2></li>  

<li><h2 id="3">3. Text 3...</h2></li> 
</div>
</div>
</body>

Thank you for help

Have you tried to give some class to you `h2` element like `.highlighted` and the when you click on number you assign this class on corresponding `h` element? — Krusader, Oct 19 '17 at 06:00
Hi Erekle..on number click,do we have to swap the quiz options? — Satyanarayana.Ruppa, Oct 19 '17 at 06:05
You can also use `h2:target { background: red; }` this will change `h2` background color when it's targeted by anchor element. — Krusader, Oct 19 '17 at 06:07

score 1 · Answer 1 · answered Oct 19 '17 at 06:32

Correct me if am wrong. You wanted to highlight top position H2's background-color once respective number is clicked. If so check below snippet for reference.

I've updated below code on your script and added .active class on css.

$('#divforh').find('.active').removeClass('active'); //will remove existing active class.
$id.addClass('active'); //will add active to current H2.

$(document).on('click', 'a[href^="#"]', function(e) {
  var id = $(this).attr('href');

  var $id = $(id);
  if ($id.length === 0) {
    return;
  }

  e.preventDefault();

  var pos = $id.offset().top - 40;

  $('body, html').animate({
    scrollTop: pos
  });
  $('#divforh').find('.active').removeClass('active');
  $id.addClass('active');
});

#fora {
  position: fixed;
}

#mydiv {
  height: 1000px;
}

#divforh {
  padding-top: 500px;
}

.active{
  background-color: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="fora">
    <a href="#1">1</a>,
    <a href="#2">2</a>,
    <a href="#3">3</a>.
  </div>

  <div id="mydiv">
    <div id="divforh">
      <li>
        <h2 id="1">1. Text 1...</h2>
      </li>

      <li>
        <h2 id="2">2. Text 2...</h2>
      </li>

      <li>
        <h2 id="3">3. Text 3...</h2>
      </li>
    </div>
  </div>
</body>

Thank you. Solved :) I add CSS: – Erekle Maziashvili Oct 19 '17 at 07:03 — Erekle Maziashvili, Oct 19 '17 at 07:03
@ErekleMaziashvili mark it as answer if it helps..:) – RaJesh RiJo Oct 19 '17 at 07:06 — RaJesh RiJo, Oct 19 '17 at 07:06

score 0 · Answer 2 · answered Oct 19 '17 at 06:05

Use radio buttons

<form>
  <label><input type="radio" value="1" name="ans">1</label>
  <label><input type="radio" value="2" name="ans">2</label>
  <label><input type="radio" value="3" name="ans">3</label>
</form>

Then on css:

input[type="radio"]:checked {
  background-color: aqua;
}

Tharushi Geethma · Answer 3 · 2017-10-19T06:31:59.890

0

  <!DOCTYPE html>
    <html>
    <head>

        $(document).ready(function(){
            $(".theClassYouClick").click(function(){
             var x= (this.id);
             alert(x) ;

           $('#id'+x).css('background-color', '#ff0000');

            });
        });
        </script>



    </head>
    <body>


    <div id="fora">
    <a href="#1" id="1" class="theClassYouClick">1</a>,
    <a href="#2" id="2" class="theClassYouClick">2</a>,
    <a href="#3" id="3" class="theClassYouClick">3</a>.
    </div>

    <div id="mydiv">   
    <div id="divforh">
    <li><h2  id="id1" >1. Text 1...</h2></li>

    <li><h2  id="id2">2. Text 2...</h2></li>  

    <li><h2  id="id3">3. Text 3...</h2></li> 
    </div>
    </div>

edited Oct 19 '17 at 06:31

answered Oct 19 '17 at 06:05

Tharushi Geethma

1,249
15
21

I need... If I click on Numbers 1, 2, 3... After click on numbers, higlight corresponding H2 – Erekle Maziashvili Oct 19 '17 at 06:28
@ErekleMaziashvili You can get the clicked ID to a variable and then you can use that variable plus some text to pass as the selector of the heading. :) – Tharushi Geethma Oct 19 '17 at 06:36
https://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors – Tharushi Geethma Oct 19 '17 at 06:39
Hi Erekle..you can see my post in this page for working code for your purpose. – Satyanarayana.Ruppa Oct 19 '17 at 06:46

score 0 · Answer 4 · answered Oct 19 '17 at 06:38

Here is the working code:(just copy and try!)

<!DOCTYPE html>
<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
    #fora {
    position:fixed;
    }
    #mydiv {
    height:1000px;
    }
    #divforh {
    padding-top: 500px;
    }
    .anchor{
        background-color: yellow;
    color: green;
    text-decoration: none;
    border-style: solid;
    border-color: #0000ff;
    }
    .highlight{
    background-color:red;
    color:green;
    }
    .normal{
    background-color:yellow;
    color:green;
    }
      </style>

 <script>
    $(document).on('click', '.anchor', function(e) {

        $('h2').removeClass('highlight');
        var id = $(this).html();
        var $id = $('#divforh #'+id);
        $id.addClass('highlight');

        if ($id.length === 0) {
            return;
        }       
        var pos = $id.offset().top - 40;
        $('body, html').animate({scrollTop: pos});
    });
    </script>
    </head>
    <body>
    <div id="fora">
    <a href="javascript:void();" class="anchor">1</a> 
    <a href="javascript:void();" class="anchor">2</a> 
    <a href="javascript:void();" class="anchor">3</a> 
    </div>

    <div id="mydiv">   
    <div id="divforh">
    <ul>
    <li><h2 id="1">1. Text 1...</h2></li>

    <li><h2 id="2">2. Text 2...</h2></li>  

    <li><h2 id="3">3. Text 3...</h2></li> 
    </ul>
    </div>
    </div>
    </body>
</html>

How to higlight onclick numbers H2 background color or Text in H2

4 Answers4