Javascript 单击添加背景色

嗨，我的django模板中有一个动态li

<script type="text/javascript" language="javascript">
    function setSize(size) {
        document.getElementById('id_option1').value = size;
    }

    function notavailable(notavai) {
        alert('selected product is not available');
    }
</script>

函数设置大小（大小）{
document.getElementById（'id_option1'）。值=大小；
}
功能notavailable（notavai）{
警报（“所选产品不可用”）；
}

{% for i in prosize %}
    {% if i.num_in_stock > 0 %}
        <li><a id="{{i.option1}}1" ref="javascript:setSize('{{i.option1}}')">{{i.option1}}</a></li>
    {% endif %}
{% endfor %}

{%fori in prosize%}
{如果库存中的i.num\u>0%}
{{i.option1}}
{%endif%}
{%endfor%}

---

我需要将背景*颜色*添加到活动链接onclick我已经在上使用javascript函数了。请建议我怎么做

你想要的东西不应该用javascript或python实现，而应该用CSS实现。您应该在CSS中使用

：active

选择器

因此，很简单，在HTML标记中，您有：

<a class="order" id="{{i.option1}}" href="javascript:setSize('{{i.option1}}')">{{i.option1}}</a>

---

jQuery 如果您使用的是jQuery，则不需要在内部使用javascript，让jQuery为您处理所有这些问题。 在

.js

文件中编写此代码：

$(function () {
    // get al links and attach the `click` handler to them
    $('.order').on('click', function (e) {
        // prevent default behaviour of link
        e.preventDefault();

        // get size and do something with it
        var size = $(this).attr('data-size');
        $('#textbox').val(size);

        // change the color the others to transparent
        $('.order').css('background-color', 'transparent');

        // change the color of link
        $(this).css('background-color', '#ff6600');
    });
});

• 你可以查一下电话号码

---

在循环中，还可以绑定点击事件并传递id…如

{% for i in prosize %}
    {% if i.num_in_stock > 0 %}
        <li><a id="{{i.option1}}1" onclick='ChangeColor('+{{i.option1}}1+')' ref="javascript:setSize('{{i.option1}}')">{{i.option1}}</a></li>
    {% endif %}
{% endfor %}

function ChangeColor(id)
{
    $("#"+id).css("background","#fff");
}

{%fori in prosize%}
{如果库存中的i.num\u>0%}
{{i.option1}}
{%endif%}
{%endfor%}
函数更改颜色（id）
{
$（“#”+id）.css（“背景”，“#fff”）；
}

您到底想要什么？你想当用户点击你的链接时，改变它的背景颜色吗？是的，正是我想要的我已经添加了我的答案，如果你使用jQuery，你可以更好地编写函数，我目前正在编写它，并将很快更新我的答案

；）。我已经使用了这个它工作得很好的文档。getElementById（大小）。style.backgroundColor='#ff6600'；但它使所有的背景改变点击，我只需要一次一个highlighted@user2106353你以前没有提到过，我已经更新了我的答案，检查一下（别忘了更改HTML标记）。我已经在你的链接中添加了一个类。@user2106353不客气，我也更改了JavaScript方法以与IE兼容，不要错过它
：）
。
{% for i in prosize %}
    {% if i.num_in_stock > 0 %}
        <li><a id="{{i.option1}}1" onclick='ChangeColor('+{{i.option1}}1+')' ref="javascript:setSize('{{i.option1}}')">{{i.option1}}</a></li>
    {% endif %}
{% endfor %}

function ChangeColor(id)
{
    $("#"+id).css("background","#fff");
}