Question

我希望你们可以帮助我。

导航 tabmenunav 在标签底部有3个小点，我需要计算每个标签的高度并将它们放在底部。目前所有人都处于绝对位置并且看起来并不好。

Jquery的

(function tabszIndex() {

$('ul.tabmenu > li > a').each(function(e) {
    $("#tabmenunav").append("<a href='javascript:void(0);' class=''>&#8226;</a>");
});

$('ul.tabmenu > li > a').click(function(e) {
    var selectedTabIndex = $(this).parent().attr('id').substring(3); //parseInt(this.hash.substring(4));
    $('ul.tabmenu a').removeClass('active');
    $(this).addClass('active');
    $('#tabmenunav a').removeClass('active');
    $('#tabmenunav a').eq($(this).parent().index()).addClass('active');
    var i = 0;
    $('.tabmenu li').css('z-index', function(index) {
        var z = index < selectedTabIndex ? 1 : (index > selectedTabIndex ? --i : 0);
        return z
    });
    e.preventDefault();
});
$('#tabmenunav a').click(function() {
    var idx = $(this).index();
    $('> a', $('ul.tabmenu > li').eq(idx)).trigger('click');

})
var lastTabIndex = $('.tab').length - 1;
$('.tab').each(function(i) {
    if (i != lastTabIndex) {
        $(this).append("<a href='javascript:void(0)' class='next-tab mover'>Next Tab &#187;</a>");
    }
    if (i != 0) {
        $(this).append("<a href='javascript:void(0)' class='prev-tab mover'>&#171; Prev Tab</a>");
    }
});
var tabMenu = $('.tab');
$('.next-tab, .prev-tab').click(function() {
    var newTabIndex = $(this).hasClass('next-tab') ? 1 : -1;
    var idx = (parseInt($(this).parents('li').attr('id').substring(3)) + newTabIndex);
    $('ul.tabmenu > li#tab' + idx + ' > a').trigger('click');
});
$('> a', $('ul.tabmenu > li').eq(0)).trigger('click');

}）（）;

Answer 1

首先想到的是使用offset()。 Documentation。您可以使用它来捕获元素的位置，然后转过来并使用它来设置另一个元素的位置。我使用此技术修改了jsfiddle here。

以下是我添加的内容：

var offsetGoal = $("#Overview").offset();
$("#Features").offset({ top: offsetGoal.top, left: (offsetGoal.left+100) });
$("#Technical").offset({ top: offsetGoal.top, left: (offsetGoal.left+200) });

也许这对你有用。

编辑：哎呀，我刚刚注意到你要求转移这三个小点。我想出了以下内容来调整你可能会觉得有用的位置。

我决定计算菜单中li元素的数量（假设你最终有更多）并将其乘以一组像素来调整。

// However many elements in our tab menu should reinforce how far down to shift the navigation elements.
var shiftDotsBy = $(".tabmenu>li").size() * 3;
// Find the current position and just shift it downward
var dotsCurrentPos = $("#tabmenunav").offset();
$("#tabmenunav").offset({top: (dotsCurrentPos.top+shiftDotsBy), left: dotsCurrentPos.left});

Working example

修改：此jsfiddle已更新，并根据点击的标签及其相对高度差异来移动点。这是方法：

// tab index is one-based; assuming each tab is twenty pixels lower than the previous one
var shiftDotsBy = (selectedTabIndex - 1) * 20;
var dotsCurrentPos = $("#tabmenunav").offset();
// Based on the original position of the dots determined outside this event, shift the dots by how far each tab extends down
$("#tabmenunav").offset({top: (dotsOrigPos.top+shiftDotsBy), left: dotsCurrentPos.left});

考虑到这些想法，您应该可以控制点的出现和转换方式。

Jquery选项卡根据选项卡的高度定位导航点

1 个答案: