1

皆さんがこれで私を助けてくれることを願っています。

ナビゲーションのtabmenuunavには、タブの下部に 3 つの小さな点があります。各タブの高さを計算して下部に配置する必要があります。現時点では、すべてが絶対的な位置にあり、見栄えがよくありません。

デモ: http://jsfiddle.net/QxgDr/24/

Jクエリ

(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

最初に頭に浮かんだことの 1 つは、 の使用でしoffset()た。ドキュメンテーション。これを使用して、要素の位置をキャプチャし、向きを変えて別の要素の位置を設定することができます。この手法を使用して、jsfiddle hereを変更しました。

これが私が追加したものです：

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

おそらくそれはあなたのために働くでしょう。

編集: おっと、あなたが 3 つの小さな点の移動について質問していることに気付きました。私はあなたが役に立つかもしれないそれらの位置を調整するために次のことを思いつきました.

メニューに含まれる 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 に答える