Question

如果点击数字1,2,3

，如何高亮显示H2背景颜色或H2中的文字

我用于测验系统的代码。

如果我点击页面上的数字，posiotion会移动相应的H2

＆＃13;

# Change quality into categorical data

for wine in wines:
    if wine["quality"] <= 4:
        wine["quality"] == "Bad"
    elif wine["quality"] <= 8:
        wine["quality"] == "Average"
    else:
        wine["quality"] == "Excellent"

＆＃13;

$(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});
});

＆＃13;

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

＆＃13;

感谢您的帮助

Answer 1

如果我错了，请纠正我。您希望在单击相应的数字后突出显示顶部位置H2 class bc { int a; bc() { System.out.println("hi this is construvtor "); a = 10; System.out.println("the value of a=" + a); } bc(int i){} } class dc extends bc { int b; dc() { super(1); // invoking super class parameterized constructor a = 20; System.out.println("derived dc"); System.out.println("derived value of a=" + a); } } public class sup { public static void main(String[] args) { dc s1 = new dc(); } }。如果是，请查看下面的代码段以供参考。

我在脚本上更新了以下代码，并在css上添加了background-color类。

.active

$('#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;
}

Answer 2

使用单选按钮

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

然后在css：

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

Answer 3

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

Answer 4

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

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

如何高亮点击数字H2背景颜色或H2中的文字

4 个答案: