Javascript 如何在H2中单击数字H2背景色或文本_Javascript_Jquery_Html_Css

Javascript 如何在H2中单击数字H2背景色或文本

javascript jquery html css

Javascript 如何在H2中单击数字H2背景色或文本,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如果我点击数字1、2、3，如何高亮H2背景色或H2中的文本这段代码我用于测验系统若我点击页面上的数字，posiotion移动了相应的H2 $（文档）。在（'click'，'a[href^=“#”]”上，函数（e）{ var id=$（this.attr（'href'）；变量$id=$（id）；如果（$id.length==0）{ 返回； } e、预防默认值（）； var pos=$id.offset（）.top-40； $（'body，html'）.animate（{scrollTo

如果我点击数字1、2、3，如何高亮H2背景色或H2中的文本

这段代码我用于测验系统

若我点击页面上的数字，posiotion移动了相应的H2

$（文档）。在（'click'，'a[href^=“#”]”上，函数（e）{
var id=$（this.attr（'href'）；
变量$id=$（id）；
如果（$id.length==0）{
返回；
}
e、 预防默认值（）；
var pos=$id.offset（）.top-40；
$（'body，html'）.animate（{scrollTop:pos}）；
});
#论坛{
位置：固定；
}
#mydiv{
高度：1000px；
}
#divforh{
填充顶部：500px；
}

,
,
.
一,。正文1
二,。正文2…
三,。文本3…
使用单选按钮
<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>


$（文档）.ready（函数（）{
$（“.theClassYouClick”）。单击（函数（）{
var x=（this.id）；
警报（x）；
$（'#id'+x）.css（'background-color'，'#ff0000'）；
});
});
,
,
.
一,。正文1
二,。正文2…
三,。文本3…
如果我错了，请纠正我。单击相应的数字后，您希望突出显示顶部位置H2的背景色。如果是这样，请检查下面的代码段以供参考
我已经在你的脚本上更新了下面的代码，并在css上添加了.active
类
$('#divforh').find('.active').removeClass('active'); //will remove existing active class.
$id.addClass('active'); //will add active to current H2.


$（文档）。在（'click'，'a[href^=“#”]”上，函数（e）{
var id=$（this.attr（'href'）；
变量$id=$（id）；
如果（$id.length==0）{
返回；
}
e、 预防默认值（）；
var pos=$id.offset（）.top-40；
$（'body，html'）。设置动画({
滚动顶：位置
});
$（'#divforh'）.find（'.active'）.removeClass（'active'）；
$id.addClass（“活动”）；
});
#论坛{
位置：固定；
}
#mydiv{
高度：1000px；
}
#divforh{
填充顶部：500px；
}
.主动{
背景色：青色；
}

,
,
.

1.正文1。。。


2.文本2。。。


3.文本3。。。

以下是工作代码：（只需复制并尝试！）

#论坛{
位置：固定；
}
#mydiv{
高度：1000px；
}
#divforh{
填充顶部：500px；
}
.主播{
背景颜色：黄色；
颜色：绿色；
文字装饰：无；
边框样式：实心；
边框颜色：#0000ff；
}
.亮点{
背景色：红色；
颜色：绿色；
}
.正常{
背景颜色：黄色；
颜色：绿色；
}
$（文档）.on（'click'，'.anchor'，函数（e）{
$（'h2'）.removeClass（'highlight'）；
var id=$（this.html（）；
变量$id=$（'divforh'id+id）；
$id.addClass（“突出显示”）；
如果（$id.length==0）{
返回；
}       
var pos=$id.offset（）.top-40；
$（'body，html'）.animate（{scrollTop:pos}）；
});

一,。正文1
二,。正文2…
三,。文本3…

你有没有试着给你一些类h2
元素，比如。突出显示的
，当你点击数字时，你把这个类分配到相应的h
元素上？嗨，艾瑞克。点击数字时，我们必须交换测验选项吗？你也可以使用h2:target{background:red；}
当锚元素将其作为目标时，这将更改h2背景色。有关工作代码，请参阅我的帖子。我需要。。。如果我点击数字1，2，3。。。单击数字后，将亮起相应的灯H2@ErekleMaziashvili您可以将单击的ID获取到一个变量，然后使用该变量加上一些文本作为标题的选择器传递。：）你好，艾瑞克。你可以在这个页面上看到我的文章，了解你的工作代码。谢谢。已解决：）我添加CSS:@ErekleMaziashvili将其标记为答案，如果有帮助的话：）
  <!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>

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

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