选项卡和图像定时更改

Question

我有一个选项卡，在左侧显示选项卡内容，但在刷新时，选项卡当前页面不会停留，而是返回到主页链接。

其次，在选项卡内容上，我的Django数据库中有图像，如果我使用forloop在模板上显示它们，但我想在给定时间后更改图像。下面是我的代码，以便更好地理解。。

Js

// Sidebar functionality
function openLinks(links){
var i;
var x = document.getElementsByClassName("tabcontent");
for (i = 0; i < x.length; i++){
x[i].style.display = "none";
}
document.getElementById(links).style.display = "block";
}
// Changing Images
var divs = $('#men .column');
(function cycle(){
setTimeout(function(){
var index = Math.floor(Math.random() * divs.length);
divs.removeClass('active')
.eq(index).addClass('active');
cycle();    
},500);
})();

我的HTML

<div class="sidebar">
<ul>
<li><a href="#/home" class="tablinks" onclick="openLinks('home')">
<span class="icon"><i class="fas fa-home" aria-hidden=True></i></span>
<span class="title">Home</span>
</a></li>
<li><a href="#/men" class="tablinks" history="true" onclick="openLinks('men')">
<span class="icon"><span class="icon"><i class="fas fa-male" aria-hidden=True></i></span>
<span class="title">Men</span>
</a></li>
</div>

<div id="home" class="tabcontent">
{% for home in home %}
<div class="column">
<a href="{{men.get_men_absolute_url}}"><img src="{{home.pictures.url}}" style="width: 150px; height: 100px;"></a>
</div>
{% endfor %}

<div id="men" class="tabcontent" style="display: none;">
{% for men in men %}
<div class="column">
<a href="{{men.get_men_absolute_url}}"><img src="{{men.men_pictures.url}}" style="width: 150px; height: 100px;"></a>
</div>
{% endfor %}
</div>

Answer 1

在HTML中，forloops上没有｛%endfor%｝。这就是Django在没有HTML的情况下通常会崩溃的原因吗？