我已经阅读了许多示例，但似乎没有一个可以解决我的所有问题。我有一个 Wordpress 生成的菜单，其中 LI 项包含指向由 Data Cycle FX 插件和 jQuery 控制的内容的锚链接。一切都按我的意愿工作，除了在页面刷新/加载时，我想检测哪个 LI 项目是 .active，并让该项目在可见区域内居中。（如果重新加载页面，这主要是一个问题，因为任何不是前 6 个项目之一的 li.active 都会被隐藏。）我认为我需要检测 .sub-navigation div 的宽度并以某种方式使用position() 或 offset() ...但我的尝试没有成功。任何意见是极大的赞赏 ：-）。
这是我的 HTML 显示菜单结构：
<body>
<div class="sub-navigation">
<div class="prev">
<a href="#"><</a>
</div><!--end prev-->
<div class="next">
<a href="#">></a>
</div><!--end next-->
<div class="menu-product-pages-container">
<ul class="subnav cycle-slideshow" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-easing="linear" data-cycle-carousel-offset="10"data-cycle-next=".next a" data-cycle-prev=".prev a" data-cycle-slides="li">
<li class="refrigeration-menu"><a href="#refrigeration">Refrigeration</a></li>
<li class="food-prep-menu"><a href="#food-prep">Food Prep</a></li>
<li class="cooking-menu"><a href="#cooking">Cooking</a></li>
<li class="baking-menu"><a href="#baking">baking</a></li>
<li class="warewashing-menu"><a href="#warewashing">Warewashing</a></li>
<li class="storage-menu"><a href="#storage">Storage</a></li>
<li class="food-transport-menu"><a href="#food-transport">Food Transport</a></li>
<li class="ventilation-menu"><a href="#ventilation">Ventilation</a></li>
<li class="serving-lines-menu"><a href="#serving-lines">Serving Lines</a></li>
<li class="conveyors-menu"><a href="#conveyors">Conveyors</a></li>
</ul></div></div><!--.sub-navigation-->
</body>
这是我的CSS：
.sub-navigation {
width: 100%;
float: left;
}
.subnav {
background: #777;
list-style-type: none;
margin: 0px;
padding-left: 0px;
position: relative;
height: 40px;
overflow-x: hidden;
white-space: nowrap;
}
.subnav li {
display: inline;
line-height: 40px;
padding: 0 30px 0 30px;
}
.subnav li a {
color: #000;
display: block;
font-size: 95%;
text-transform:uppercase;
padding-left: 15px;
}
.active {
background-color: #c32d2e;
}
.prev {
color: #ccc;
float: left;
font-size: 185%;
font-weight: bold;
line-height: 40px;
width: 2%;
height: 39px;
}
.prev a, .next a {
color: #ccc;
display: block;
margin: 5px auto 0 auto;
text-align: center;
text-decoration: none;
width: 98%;
}
.next {
float: right;
font-size: 100%;
font-weight: bold;
line-height: 40px;
width: 2%;
height: 39px;
}
我的查询：
$('ul.subnav').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.parent().addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$("html, body").animate({ scrollTop: 0 }, "fast");
// Bind the click event handler
$(this).on('click', 'a', function(e){
$("html, body").animate({ scrollTop: 0 }, "fast");
// Make the old tab inactive.
$active.parent().siblings().removeClass('active');
$active.parent().removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active
$active.parent().addClass('active');
$content.show();
//change url in bar
window.history.pushState($active);
// Prevent the anchor's default click action
e.preventDefault();
});
});
似乎与此类似的功能应该可以使 .active 元素在视口中居中，但我的理解/方法一定有问题：
function scrollMenu(){
$viewportWidth = $('.subnav').width(),
$activeTab = $('ul').find('li.active'),
$elWidth = $activeTab.width(),
$elOffset = $activeTab.offset();
$('.active').parent().scrollTo(elOffset.left - (elWidth/2) - (viewportWidth/2));
}