Question

如何将:target {opacity: 1}添加到下面的href"#pop{{user.user_id}}"？在页面生成

之前，user_id是未知的

for循环如下;

{% for user in pull %}
    <a href="#pop{{user.user_id}}">Link: {{user.user_name}} {{ user.user_id }}</a>

    <div style="opacity:0" id="pop{{user.user_id}}">
                {{ user.info }}
    </div>
{% endfor %}

在将其翻译成Django的网页后看起来像这样。

<a href="#pop10">Link: tom 10</a>

<div style="opacity:0" id="pop10">
this is my info
</div>

<a href="#pop8">Link: ann 8</a>

<div style="opacity:0" id="pop8">
i am an apple
</div>

<a href="#pop3">Link: mike 3</a>

<div style="opacity:0" id="pop3">
i like pears
</div>

Answer 1

如果所有这些样式的样式相同，那么您可以在循环中为每个div和锚添加一个类，然后将样式添加到具有此添加类的这些锚点和div。如果你想要这些div和锚点的不同风格，那么你需要有id。希望它有帮助

{% for user in pull %}
    <a class="styled_class" href="#pop{{user.user_id}}">Link: {{user.user_name}} {{ user.user_id }}</a>

    <div class="styled_div" style="opacity:0" id="pop{{user.user_id}}">
                {{ user.info }}
    </div>
{% endfor %}

Answer 2

好吧，经过深思熟虑后我自己想出来了，你需要做的就是在同一个模板中制作一个样式标签，该模板被包含在同一个for循环中，以生成指向每个div的单独的唯一css ID

<style type="text/css">
 {% for i in pull %}
        #pop{{i.user_id}}:target {
            opacity: 1;
            z-index: 1;
        }

        #pop{{i.user_id}} {
            width: 58.8em;
            min-height: 10em;
            background: none repeat scroll 0% 0% #FFA500;
            top: 9em;
            border-radius: 16px;
            opacity: 0;
            position: absolute;
            z-index: -1;
            transition: opacity 1s ease 0s, z-index 1s cubic-bezier(0, 1, 1, 0) 0s;
            max-height: 34em;
            padding: 1em;
            margin-left: 1em;
        }

        #pop_close{{i.user_id}}:target {
            opacity: 0;
            z-index: -1;
        }
    {% endfor %}
</style>

如何从CSS </div>中定位未知的<div> s

2 个答案: