أفضل نهج slideup وعلامات التبويب مسج

Question

أنا إنشاء صفحة مع صورة في أعلى القائمة أدناه.عندما ينقر المستخدم على 3 أزرار القائمة ، صورة slideUp و تمرير الصفحة للأسفل لكي القائمة في أعلى الصفحة ، ثم الحق .المحتوى div يتلاشى في.على slideUp ينبغي أن يحدث إلا أول مرة ينقر المستخدم على زر من الأزرار.

ما أفضل طريقة للقيام بذلك مع jQuery ؟ (لا الإضافات)

أنا أيضا بحاجة إلى معرفة كيف يمكن أن لا يمنع أن تتلاشى في الصفحة التي هي بالفعل واضحة إذا كنت اضغط نفس الزر مرتين ؟

أنا باستخدام rel بدلا من href, منذ href جعل الصفحة القفز ، حتى مع return false.

هذا ما لدي حتى الآن:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    imgVisible = true;

    $('#mainmenu a').click(function(){
        var $activeTab = $(this).attr('rel');
        if(!imgVisible){
            $('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
            $('.content').hide();
            $($activeTab).fadeIn();
        } else{
            $('#imgholder').slideUp(500,function(){
                imgVisible = false;
                $('#mainmenu a[rel="'+$activeTab+'"]').click();
            });
        }
        return false;
    });

});
</script>

<div id="imgholder"><img src="image.jpg" /></div>

<div id="mainmenu">
    <ul>
        <li><a rel="#tab1"></a></li>
        <li><a rel="#tab2"></a></li>
        <li><a rel="#tab3"></a></li>
    </ul>
</div>

<div id="container">

    <div class="content" id="tab1">
        content
    </div>


    <div class="content" id="tab2">
        content
    </div>


    <div class="content" id="tab3">
        content 
    </div>

</div>

Answer 1

التعليمة البرمجية التالية يحقق ما تحتاج إليه:

$('#mainmenu a').click(function(){  
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    $('#imgholder').slideUp(500,function(){         
        $('#'+myrel).fadeIn();
    });         
});

....
    <li><a href='#' rel='tab0'></a></li>

لقد أزالت '#' علامة من rel=" قطعة ;-)

أنا لست متأكدا لماذا تريد تمرير الصفحة.عندما ينقر المستخدم على القائمة, انه/انها بالفعل فقد ركز (إذا كان مرئيا داخل الحالي المعاينة).ولكن هل لديك كبيرة جدا أعلى الصورة ؟ إذا كان هذا هو الحال, اسمحوا لي أن أعرف وأنا سوف تعديل المقتطف.(لا يزال يعتمد على كمية المحتوى أدناه القائمة مرئية عندما تكون الصفحة الأولى الأحمال.)

أيضا ، كبار المسئولين الاقتصاديين الأسباب التي قد ترغب في استخدام href بدلا من rel سمة وخلق محتوى منفصل عقد صفحات.التالي مقتطف من شأنه أن يزيل الملاحة العمل.

$('#mainmenu a').each(function(){
    var myhref = $(this).attr('href');
    $(this).attr('href','#').attr('rel',myhref);
}).click(function(){
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    //....etc

Answer 2

أعتقد أن هذا هو مثال عظيم على ما تبحث عن الخاص بك: العضوية علامات التبويب

Answer 3

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;

$mainmenu.find('a').click(function() {

    $activeTab = $($(this).attr('rel'));

    if (!imgVisible) {
        // dont fire any events if already open
        if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
        $lastTab.fadeOut('normal', function() {
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    } else {
        $('#imgholder').slideUp(500, function() {
            imgVisible = false;
            window.scrollTo(0, offset);
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    }

    return false;

});

أقترح بشدة إضافة <a href="#"> كما أن هذا سوف لا تجعل الصفحة القفز عند القيام به بشكل صحيح سوف تضمن المصادقة على الروابط مرساة.شخص اسمحوا لي أن أعرف إذا فاتني شيء يمكن حلها بسرعة (أو يمكنك أن تفعل ذلك بالنسبة لي إذا كان لديك الأمثل أو تحسين).