1

ブートストラップを使用して、ここに例を設定しました:http: //fixitup.com.au/clients/bootstrap/issue.html

メインサイトにscrolltoを使用し、Twitterのブートストラップ、タブも使用します。タブをクリックするとページがジャンプすることがわかりました。

onclick="return false;"タブのhrefに追加しました。

好き:

<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#about" data-toggle="tab" onclick="return false;">About Me</a></li>
<li><a href="#ripoffs" data-toggle="tab" onclick="return false;">My Ripoffs</a></li>
</ul>

scrolltoとタブが必要です...しかし、ページのジャンプを停止する必要があります。助言がありますか ?

追加:スクロールのjsは以下のaruo.jsコードにあります:

// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function() {

        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {

                // Ensure target exists
                var $target = $(this.hash), target = this.hash;
                if ($(target).length > 0) {

                    // Find location of target
                    var targetOffset = $target.offset().top;
                    $(this).click(function(event) {

                        // Prevent jump-down
                        event.preventDefault();

                        // Animate to target
                        $(scrollElem).animate({scrollTop: targetOffset}, 1100, 'swing', function() {

                            // Set hash in URL after animation successful
                            location.hash = target;

                        });
                    });
                }
        }

    });

    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
            var el = arguments[i],
            $scrollElement = $(el);
            if ($scrollElement.scrollTop()> 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

});
4

1 に答える 1

2

スクロール機能がタブに適用されないようにセレクターを変更することはできませんか?

どの属性に応じて、クラスなどが利用可能です。

この例では、:notセレクターを使用して、クラス「foo」の要素を除外します。

http://jsfiddle.net/vfJWk/1/

たとえば、セレクターを次のように変更します。

$('a [href * =#]:not([data-toggle = "tab"])')。each(function(){

うまくいくでしょうか?

于 2012-07-13T03:09:01.490 に答える