Any restrictions on HTML <li>?
I have the following code with Python:
<div id="sidebar-wrapper" class="container-fluid" style="background-color: lightgray">
<nav id="spy" class="nav nav-pills navbar-stacked">
<ul class="sidebar-nav nav">
<li class="">
<a href="{% url 'PHIproduct' %}" data-scroll="" class="">
<span class="fa fa-anchor solo"><h3>Product List</h3></span>
</a>
<li class="">
{% for i in loop_times_product %}
<a href="{% url 'PHI' %}?id={{ i }}" data-scroll="" class="">
<span class="fa fa-anchor solo" id="{{ i }}">{{ i|safe }}</span>
</a>
{% endfor %}
<li class="">
{% for i in loop_times %}
<a href="{% url 'PHIc' %}?id={{ i }}" data-scroll="" class="">
<span class="fa fa-anchor solo" id="{{ i }}">{{i|safe}}</span>
</a> {% endfor %}
<li class="">
{% for i in loop_timesc %}
<a href="{% url 'button' %}?id={{ i }}" data-scroll="" class="">
<span class="fa fa-anchor solo" id="{{ i }}">{i|safe}}</span>
</a> {% endfor %}
</li>
</li>
</li>
</li>
</ul>
</nav>
</div>
The main goal is to add the following function:
After I applied this code, when the A button is pressed, the car and engine will not be displayed, which means this part of the code is not working:
<li class="">
{% for i in loop_timesc %}<a href="{% url 'button' %}?id={{ i }}" data-scroll="" class=""><span class="fa fa-anchor solo" id="{{ i }}">{{i|safe}}</span></a>
{% endfor %}
</li>
Are there any restrictions on the code li
or am I writing the wrong code here? Can anyone help me take a look at this because I have already spent 2 days trying to find the error here but failed.
I didn't go into your code in great detail, but one thing popped up to me: you insert elements <li>
directly into each other. You cannot do this; a <li>
must be a direct child of <ol>
or <ul>
.
Forget Python for now and just look at a simple HTML example.
Invalid:
<ul>
<li>
One
<li>
One A
</li>
</li>
</ul>
Really:
<ul>
<li>
One
<ul>
<li>
One A
</li>
</ul>
</li>
</ul>
There may be other problems in your code, but it can certainly be fixed.
One more tip: if you are working with a suspicious HTML issue like this, where one of the problems might be that the generated HTML is simply not valid, don't try to figure everything out from the Python template source code. Instead, look at the source in the browser where you can see exactly what the browser is seeing.
In fact, you can do Select All and Copy from the View Source window and then paste into the W3C HTML Validator to see if the HTML is valid. If you generate invalid HTML, all bets are disabled, so this is the first thing to check.
If you process your server code (including templates) separately from the actual loaded HTML that the browser sees, you will find it much easier to debug time. The server generates HTML code; the browser parses and displays the HTML generated by the server.
source to share