切换 div 并突出显示当前菜单项
Posted
技术标签:
【中文标题】切换 div 并突出显示当前菜单项【英文标题】：Toggle divs and highlight menu item for current 【发布时间】：2015-12-06 19:00:12 【问题描述】：我想根据单击的菜单项打开/关闭几个 div。我还想将“活动”类添加到当前菜单项链接。
目前，div 会根据单击的菜单项打开/关闭，但所有菜单项在单击时都会变为“活动”。
另外，当页面第一次加载时，除了“synopsis”之外的所有 div 都被隐藏了，所以我想显示那个是活动的。
我的 jquery 不是最好的，所以这可能是一种冗长的方法，但这是我尝试过的：
这是菜单：
<a class="first-panel-menu synopsis-link" href="#">Synopsis</a> |
<a class="director-link" href="#">Director</a> |
<a class="cast-link" href="#">Cast</a> |
<a class="details-link" href="#">Details</a> |
这是我要显示/隐藏的 div：
<div class="synopsis">
<h3>Synopsis</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div class="director">
<h3>Director</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div class="cast">
<h3>Cast</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div class="details">
<h3>Details</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
还有 jquery：
// Individual film links
$( ".synopsis-link" ).click(function(e)
$( ".director" ).hide();
$( ".cast" ).hide();
$( ".details" ).hide();
$( ".synopsis" ).toggle( function() );
$(".synopsis-link").toggleClass('active non-active');
e.preventDefault();
);
$( ".director-link" ).click(function(e)
$( ".synopsis" ).hide();
$( ".cast" ).hide();
$( ".details" ).hide();
$( ".director" ).toggle( function() );
$(".director-link").toggleClass('active non-active');
e.preventDefault();
);
$( ".cast-link" ).click(function(e)
$( ".synopsis" ).hide();
$( ".director" ).hide();
$( ".details" ).hide();
$( ".cast" ).toggle( function() );
$(".cast-link").toggleClass('active non-active');
e.preventDefault();
);
$( ".details-link" ).click(function(e)
$( ".synopsis" ).hide();
$( ".cast" ).hide();
$( ".director" ).hide();
$( ".details" ).toggle( function() );
$(".details-link").toggleClass('active non-active');
e.preventDefault();
);
【问题讨论】：
请做一个jsfiddle 【参考方案1】：如果您添加一些通用类，您可以使用$(this) 定位菜单链接的点击，而不是为所有链接编写相同的代码
$(document).ready(function()
$(".section").hide(); // initially hides all sections
$(".synopsis").show(); // initially shows synopsis section
$(".section-link[section='synopsis']").addClass('active');
// initially adds active class to synopsis link
$('.section-link').click(function()
var section = $(this).attr('section'); // identifies link that was clicked
$(".section").hide(); // hides all other sections
$("." + section).show(); // shows chosen section
$(".section-link").removeClass('active'); // removes active from all other links
$(this).addClass('active'); // adds active to link clicked
);
);.active
color: red;
a.active:focus
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="first-panel-menu section-link" section="synopsis" href="#">Synopsis</a> |
<a class="section-link" section="director" href="#">Director</a> |
<a class=" section-link" section="cast" href="#">Cast</a> |
<a class="section-link" section="details" href="#">Details</a>
<br/><br/>
<div class="synopsis section">
<h3>Synopsis</h3>
<p class="panel-main-p">
SYNOPSIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div class="director section">
<h3>Director</h3>
<p class="panel-main-p">
DIRECTOR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div class="cast section">
<h3>Cast</h3>
<p class="panel-main-p">
CAST Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div class="details section">
<h3>Details</h3>
<p class="panel-main-p">
DETAILS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>【讨论】：
【参考方案2】：我建议将行为更改为通用函数，代码看起来会更好。它将类名更改为数据集。
菜单：
<div id="menu">
<a class="first-panel-menu" data-box-target="synopsis" href="#">Synopsis</a> |
<a data-box-target="director" href="#">Director</a> |
<a data-box-target="cast" href="#">Cast</a> |
<a data-box-target="details" href="#">Details</a> |
</div>
盒子
<div data-box="synopsis">
<h3>Synopsis</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div data-box="director">
<h3>Director</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div data-box="cast">
<h3>Cast</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
<div data-box="details">
<h3>Details</h3>
<p class="panel-main-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices aliquam tellus, sit amet vehicula ante lacinia a. Vivamus quis elementum risus. Mauris dictum, dolor nec ornare scelerisque, metus augue condimentum sapien, dignissim aliquet mauris ipsum quis arcu.
</p>
</div>
jQuery
>$('#menu > a').on('click', function(e)
e.preventDefault();
var boxtarget = $(this).dataset().boxTarget;
$('div[data-box]').hide(); // hide all
$('div[data-box="'+boxtarget+'"]').show(); // show only what you need
$(this).toggleClass("active"); // toggle class in menu
);
祝你好运
【讨论】：
【参考方案3】：您的 jQuery 代码中的一些 qlues：
而不是.toggle( function() );（为什么要使用空回调？）使用show()，
将所有元素合并到单个选择器中（你也可以引入新的类）并且只调用一次.hide()，
在当前元素上使用 addClass 代替 toggleClass，但首先从前一个元素中删除该类。
这里是一个链接的代码示例（
$(".synopsis-link").click(function(e)
$(".director,.cast,.details").hide();
$(".synopsis").show();
$(".active").removeClass('active');
$(".synopsis-link").addClass('active');
e.preventDefault();
);
事实上，通过一些调整可以只制作一个通用函数，但首先要更改 html（id 而不是类）：
<a id="synopsis-link" class="first-panel-menu" href="#">Synopsis</a> |
<a id="director-link" href="#">Director</a> |
<a id="cast-link" href="#">Cast</a> |
<a id="details-link" href="#">Details</a> |
这里是通用函数：
$("#synopsis-link,#cast-link,#details-link").click(function(e)
$(".synopsis,.director,.cast,.details").hide();
$("."+e.currentTarget.id.replace('-link','')).show();
$(".active").removeClass('active');
$(e.currentTarget).addClass('active');
e.preventDefault();
);
【讨论】：
以上是关于切换 div 并突出显示当前菜单项的主要内容，如果未能解决你的问题，请参考以下文章