我有一套菜单元素
<a>
还有一套
div
元素(每个元素都包含一个django模板。当前具有在
菜单
元素,具体取决于单击的是哪个(突出显示单击的菜单项)。希望它在任何时候都只显示与“active”菜单项对应的django模板。现有代码如下所示(它当前仅更改哪个菜单项具有“active”类):
<!-- top menu color activation -->
<script>
menu = {};
// ready event
menu.ready = function() {
// selector cache
var
$menuItem = $('.menu a.item, .menu .item, .menu .link.item'),
// alias
handler = {
activate: function() {
$(this)
.addClass('active')
.closest('.ui.menu')
.find('.item')
.not($(this))
.removeClass('active');
}
}
;
$menuItem
.on('click', handler.activate)
;
};
// attach ready event
$(document).ready(menu.ready);
</script>
<!-- top menu (note, using semantic UI) -->
<div class="ui container">
<div class="ui large secondary red pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<a class="active item">item-1</a>
<a class="item">item-2</a>
<a class="item">item-3</a>
<div class="right menu item">
<div class="ui simple dropdown">
More
<i class="dropdown icon"></i>
<div class="ui menu">
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Log Out</a>
</div>
</div>
</div>
</div>
</div>
<!-- including corresponding django templates (currently all visible) -->
<!-- would like only item-1.html to be visible when menu item 1 is active and similarly for the other templates here -->
<div>{% include "testapp/item-1.html" %}</div>
<div>{% include "testapp/item-2.html" %}</div>
<div>{% include "testapp/item-3.html" %}</div>
我无法理解的是如何隐藏哪个django模板在对应于当前活动菜单项的任何给定时间当前可见(例如,用户单击item-1菜单项,则只有item-1.html django模板应可见)。
如何使用jquery获得这一点功能?对…很陌生
JS
对于前端网页的东西,并会感谢任何在代码的措辞不明显的解释。