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

採取這些想法，你應該有很多控制你想要你的點出現和轉移。