Question

我想要做的是有三个按钮，它们都具有相同的文本列表，但是当单击每个按钮时，列表中只有一定数量的文本行是彩色的，而其余的是默认的颜色集。 / p>

例如..

按钮一个5/10彩色按钮两个7/10彩色按钮三个10/10彩色

基本上是这样的

https://www.hubspot.com/pricing/marketing

感谢

Answer 1

这是我相信你要求的一个粗略的例子。

<html>
<style>
    .selected {
        background-color: yellow;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      $('#btn1').click(function() {
        setSelected(1, 3);
      });
      $('#btn2').click(function() {
        setSelected(1, 6);
      });
      $('#btn3').click(function() {
        setSelected(1, 9);
      });
    });

    function setSelected(lower, upper) {
        for(var i = lower; i <= upper; i++) {
            $('#itm' + i).addClass('selected');
        }
        for(var i = upper+1; i <= 9; i++) { 
            $('#itm' + i).removeClass('selected');
        }
    }
</script>
<input id="btn1" type="button" value="Button 1"/>
<input id="btn2" type="button" value="Button 2"/>
<input id="btn3" type="button" value="Button 3"/>
<ol>
    <li id="itm1">Item 1</li>
    <li id="itm2">Item 2</li>
    <li id="itm3">Item 3</li>
    <li id="itm4">Item 4</li>
    <li id="itm5">Item 5</li>
    <li id="itm6">Item 6</li>
    <li id="itm7">Item 7</li>
    <li id="itm8">Item 8</li>
    <li id="itm9">Item 9</li>
</ol>
</html>

使用带按钮的javascript来改变文本的颜色（列表）

1 个答案: