jQuery, ошибка веб-дизайна HTML5

0

У меня есть веб-дизайн с одной страницей, в котором меню выравнивается по вертикали и фиксируется слева, а содержимое каждой страницы появляется справа при нажатии на меню. Это происходит таким образом, что при открытии индексной страницы отображается только меню без какого-либо активного меню.

Изображение 174551

Но я хочу, чтобы начальное меню было активным, и домашняя страница должна отображаться в нужное время, когда загружается индексная страница.

Изображение 174551

Дом должен быть активным и загружен автоматически в индекс.

HTML

<ul id="menu">
            <li><a id="link" href="#!/page_Home"><span></span><strong>Home</strong></a></li>
            <li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
            <li><a href="#!/page_Portfolio"><span></span><strong>Gallery</strong></a></li>
            <li><a href="#!/page_Services"><span></span><strong>Top Rated</strong></a></li>
            <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
</ul>

JQuery

$(window).load(function() { 
    var act='';

    $('#content > ul > li').css({position:'absolute', display:'none'});
    $('#content > ul > li').find('.box1').css({height:'0'})

    $('#menu > li > a span').css({opacity:'0'})

    $('#menu > li > a').hover(function(){
        $(this).find(' > span').stop().animate({opacity:'1'},600);                         
    }, function(){
        if (!$(this).hasClass('active')) {
            $(this).find(' > span').stop().animate({opacity:'0'},600);                         
        }
    })

    $('#menu > li').each(function(num){
        $(this).data({num:num})
    })
    $('#content > ul > li').each(function(num){
        $(this).data({num:num})
    })

    if (location.hash.slice(0,3)=='#!/') {
        page=location.hash.slice(3);
        open_page('#'+page);
        fl=false;
    }
    if ((location.hash=='#')||(location.hash=='')) {
        open_page('');
        fl=true;
            $('#content').stop().animate({height:'668'})
    }
    $('a').click(function(){
        if ($(this).attr('href').slice(0,3)=='#!/') {
            page=$(this).attr('href').slice(3); 
            open_page('#'+page);
            return false;
        }
        if ($(this).attr('data-type')=='close') {
            close_page()    
        }
    })
    function open_page(page){
        location.hash='#!/'+page.slice(1);
        $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
        Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
        num=$(page).data('num');
        $('#menu > li').each(function(){                      
            if ($(this).data('num')==num) {
                $(this).find('> a').addClass('active').find('> span').stop().animate({opacity:'1'},600);
                Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
            }
        })
        fl=false;
        $('#content').stop().animate({height:'868'})
        if (act!='') {
            $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
                $(act).css({display:'none'});
                $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
                    act=page;   
                }); 
            })
        } else {
            $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
                act=page;   
            });     
        }
    }
    function close_page(page){
        $('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
        Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
        location.hash='#';
        $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
            $(act).css({display:'none'});
            act='';
            fl=true;
            $('#content').stop().animate({height:'668'})
        }); 
        return false;
    }
})
Теги:
indexing

1 ответ

0

извините, но я не прилагал усилий, чтобы прочитать весь ваш код. Кажется, что вы делаете любительскую домашнюю страницу (начальные свойства css, установленные через javascript, вместо использования таблицы стилей, отсутствующих точек с запятой, глобальных переменных и т.д.).
Для этого вы можете легко щелкнуть по первой ссылке javascript в pageload.
Это немного грязно, но это сработает, и, похоже, вам все равно, грязно или нет.
Таким образом,

$('#menu > li > a : first ').click(); 

где-то в вашем $ (окне).load(function() {...}).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню