javascript - 根据另一组元素的类别不断隐藏不同的元素
问题描述
我有一组菜单元素<a>
和一组元素(每个元素都包含一个 django 模板。目前具有根据单击的菜单div
元素在菜单元素之间切换“活动”类的逻辑(突出显示单击的菜单项)。想要拥有它,以便在任何时候都只能看到与“活动”菜单项对应的django模板。现有代码如下所示(它目前只更改哪个菜单项具有“活动”类):
<!-- 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
对于前端网页内容来说非常新,并且希望对代码措辞中不明显的任何内容进行任何进一步的解释。
解决方案
我以更短且更易读的方式编写了您的代码。
$(document).ready(function(){
var item = $('.menu .item');
item.on("click",function(){
item.removeClass("active");
$(this).addClass("active");
});
});
上面的代码与您的代码完全相同。
立即编辑以显示基于该菜单单击
的特定内容,您应该将一个类添加到“模板”和一个数据属性,该属性可以使用
div
.data()
$(document).ready(function(){
// Click handler.
var item = $('.menu .item');
item.on("click",function(){
// Add the active class.
item.removeClass("active");
$(this).addClass("active");
// Show the right Django template.
var id = $(this).data("id");
if(id!="" && typeof(id)!="undefined"){
$(".template").hide();
$(".template[data-id='"+id+"']").show();
}
}); // End click.
// On load, only show the first template
$(".template").hide();
$(".template[data-id='1']").show();
}); // end ready.
.active{
color:red;
}
.template{
width:20em;;
height: 8em;
border: 1px solid black;
box-shadow:inset 0 0 3em #fff;
margin:1em;
}
.template:nth-child(3){
background-color:#6AA;
}
.template:nth-child(4){
background-color:#A6A;
}
.template:nth-child(5){
background-color:#AA4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" data-id="1">item-1</a>
<a class="item" data-id="2">item-2</a>
<a class="item" data-id="3">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>
<div class="template" data-id="1">item-1.html</div>
<div class="template" data-id="2">item-2.html</div>
<div class="template" data-id="3">item-3.html</div>
推荐阅读
- c# - 在 MVP 中,演示者可以直接访问用户控件而不是通过界面吗?
- ios - Web Socket没有在iOS中使用objective-c打开
- docker - 我的应用程序现在是 dockerized - 但是我如何使用 docker-compose 添加基本图像(例如 alpine)?- 或者,我应该这样做吗?
- excel - 两张纸的Vlookup
- macos - ld:安装mysql2 gem时找不到-lssl的库
- configuration - 无法将 Sphinx 作为 Windows 服务运行
- sql - 递归查询设计 - Oracle SQL
- python - 网络抓取研究摘要 - 在输出中维护项目符号点的问题
- html - 如何使 SVG 创建的形状响应任何屏幕尺寸?
- java - 从由数字组成的字符串中一个一个地提取每个数字