1

我希望你们能帮助我解决这个问题。

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

演示：http: //jsfiddle.net/QxgDr/24/

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');

})();

4

1 回答 1

1

首先想到的事情之一是使用offset(). 文档。您可以使用它来捕获元素的位置，然后转身并使用它来设置另一个元素的位置。我已使用此技术在此处修改您的jsfiddle。

这是我添加的内容：

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});

工作示例。

编辑：此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});

考虑到这些想法，你应该对你希望你的点如何出现和移动有很大的控制权。

于 2012-04-20T11:58:52.393 回答