我有列表透视列表项博客、案例研究、白皮书和相应的类。单击列表项,它会在“”中显示相应的元素。页面透视,即,如果我点击博客,它只显示博客,隐藏其他。如果我点击白皮书,它只显示白皮书并隐藏其他白皮书。在白皮书中,我有四个“页面透视”。我想展示前三份白皮书“页面透视图”
(function($) {
function perspective_type() {
$(".perspective-list a").click(function(e) {
e.preventDefault();
$(".perspective-list a").parent().removeClass('active');
$('.wrapper .page-perspective').show();
var href = $(this).attr('href');
$('.wrapper > :not(.' + href + ')').hide();
$('.wrapper > .' + href + '').show();
$(this).parent().addClass('active');
});
$(".perspective-list a").mouseover(
function() {
$(".perspective-list a").removeClass('hover');
$(this).parent().addClass('hover');
});
$(".perspective-list a").mouseout(
function() {
$(".perspective-list a").each(function() {
$(this).parent().removeClass('hover');
});
});
$('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
}
jQuery(document).ready(function($) {
var href= 'Whitepapers';
jQuery('.perspective-list a.'+href+'').parent().addClass('active');
$('.wrapper > .'+href+'').show();
jQuery('.wrapper > :not(.'+href+')').hide();
perspective_type();
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_perspectives">
<div class="view view-page-perspectives view-id-page_perspectives">
<div class="perspective-list">
<ul class="nav nav-justified">
<li class="">
<a class="Blogs" href="Blogs">Blogs</a>
</li>
<li>
<a class="Case_Studies" href="Case_Studies">Case Studies</a>
</li>
<li class="">
<a class="Whitepapers" href="Whitepapers">Whitepapers</a>
</li>
</ul>
</div>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="wrapper">
<div class="page-perspective row Whitepapers" style="display: block;">
Whitepaper 1
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="wrapper">
<div class="page-perspective row Blogs" style="display: none;">
Blogs 1
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<div class="wrapper">
<div class="page-perspective row Whitepapers" style="display: block;">
Whitepaper 2
</div>
</div>
</div>
<div class="views-row views-row-4 views-row-even">
<div class="wrapper">
<div class="page-perspective row Case_Studies" style="display: none;">
Case study 1
</div>
</div>
</div>
<div class="views-row views-row-5 views-row-odd">
<div class="wrapper">
<div class="page-perspective row Blogs" style="display: none;">
Blogs 2
</div>
</div>
</div>
<div class="views-row views-row-6 views-row-even">
<div class="wrapper">
<div class="page-perspective row Whitepapers" style="display: block;">
Whitepaper 3
</div>
</div>
</div>
<div class="views-row views-row-7 views-row-odd views-row-last">
<div class="wrapper">
<div class="page-perspective row Whitepapers" style="display: block;">
Whitepaper 4
</div>
</div>
</div>
</div>
</div>
</div>
