Jquery标签导航点根据标签的高度定位

Question

我希望你们能帮助我。

导航，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'); 

}）（）;

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

采取这些想法，你应该有很多控制你想要你的点出现和转移。