Визуализировать ссылку была нажата или нет - PullRequest
0 голосов
/ 25 апреля 2020

В настоящее время я работаю над веб-приложением, в котором я хотел бы показать пользователю, уже посещали ли они ссылку или нет.

Код, отображающий ссылки, довольно прост, как показано ниже.

<ul>

    <li><a href="http://google.com">google</a></li> 
    <li><a href="http://facebook.com">facebook</a></li> 
    <li><a href="http://amazon.com">amazon</a></li> 

</ul>

Я хотел бы визуализировать, что ссылка была нажата путем добавления галочки или чего-то еще вдоль этих линий, справа от ссылки. Как бы я go сделал это? Я работаю с Django для этого проекта, так что решение Django -specifi c было бы замечательно.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Я раньше не использовал Django, но у меня есть несколько сайтов, использующих Flask, поэтому я могу понять несколько частей. Я добавлю свой ответ в Flask и, надеюсь, вы сможете перевести его в Django. Извините за это: /

Я думаю, что вы можете сделать эту работу с помощью Jinja и некоторых простых HTML.

Я внес некоторые изменения, потому что ссылки просто перенаправят вас за пределы вашей страницы, поэтому Ваши галочки не будут видны

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form action="/" method="POST">
        <button name="google_" value="Google">Google</button>{% if _google %}✔{% endif %}
            <br>
        <button name="fb_" value="Facebook">Facebook</button>{% if _fb %}✔{% endif %}
    </form>
</body>
</html>

код в Flask будет выглядеть так:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == "POST":
        if request.form.get("google_", False) == "Google":
            _google = True
            return render_template("test.html", _google=_google)
        elif request.form.get("fb_", False) == "Facebook":
            _fb = True
            return render_template("Test.html", _fb=_fb)
    return render_template("Test.html")


if __name__ == "__main__":
    app.run(debug=True, host="localhost", port=5000)

Снимки экрана:

buttons

google

facebook

Мне не очень понравилось, но это работает: /

Снова извините за то, что превратили в Flask. У меня нет опыта работы с Django.

0 голосов
/ 25 апреля 2020

Очень простой способ - использовать селектор CSS :visited (если вы не хотите использовать JavaScript). Проверьте эту ссылку , чтобы узнать, как использовать этот селектор в CSS.

. Вы можете добавить галочку в HTML и установить ее color так же, как цвет фона ( так, чтобы это не показывалось). И затем измените его на другой цвет при посещении ссылки. Проверьте прикрепленный фрагмент.

a span {
  color: white;
}

a:visited span {
  color: black;
}
<ul>

  <li><a href="http://google.com">google<span>&#10003;</span></a></li>
  <li><a href="http://facebook.com">facebook<span>&#10003;</span></a></li>
  <li><a href="http://amazon.com">amazon<span>&#10003;</span></a></li>

</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...