• 从一个页面跳转到另一个页面的指定位置,并实现显示隐藏


    //导航

    <ul>

    //显示页面

    <li class="active">
    <a href="javascript:;">公司简介</a>
    <ul class="ulNav">
    <li>
    <a href="companyProfile.html#company01">公司简介</a>
    </li>
    <li>
    <a href="companyProfile.html#company02">企业文化</a>
    </li>
    <li>
    <a href="companyProfile.html#company03">发展历程</a>
    </li>
    <li>
    <a href="companyProfile.html#company04">核心能力</a>
    </li>
    </ul>
    </li>

    //跳转到这个页面的指定位置

    <li>
    <a href="product.html">业务板块</a>
    <ul class="ulNav">
    <li>
    <a href="product.html#product01">真空机械泵</a>
    </li>
    <li>
    <a href="product.html#product02">Aerzen 风机</a>
    </li>
    <li>
    <a href="product.html#product03">Olympus在线探伤</a>
    </li>
    <li>
    <a href="product.html#product04">Regal 联轴器</a>
    </li>
    </ul>
    </li>

    </ul>

    //左侧导航 显示的指定位置

    <div class="container-left”>

    <ul>
    <li class="active" id="company01">公司简介</li>
    <li id="company02">企业文化</li>
    <li id="company03">发展历程</li>
    <li id="company04">核心能力</li>
    </ul>

    </div>

    //右侧显示对应内容

    <div class="container-right">

    <div class="row active" data-name="company01">1</div>

    <div class="row active" data-name="company02">1</div>

    <div class="row active" data-name="company03">1</div>

    <div class="row active" data-name="company04">1</div>

    </div>

    js

    $(function() {
    var lis = $('.container-left').find('.row').find('ul');
    var lisW = lis.find('li');
    var h3Text = $('.row').find('.right-title').find('.rowLeftTExt');
    var rowLeftSTExt = $('.row').find('.right-title').find('.rowLeftSTExt');
    // var rowLeftTip = $('.row').find('.right-title').find('.rowLeftTip').text();
    var leftTitle = $('.row').find('.row-title').find('.leftTitle').text();
    var rowLeftSTExt1 = $('.row').find('.right-title').find('.rowLeftSTExt1');

    console.log(leftTitle);
    console.log(lis.length);
    //左侧菜单栏点击效果
    lis.on('click', 'li', function() {
    //点击切换
    var ind = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');
    var textR = $(this).parents('.container-left').siblings('.container-right').find('.row');
    textR.hide().eq(ind).show();
    //点击左侧菜单,右侧导航显示相应的导航栏内容
    var thisText = $(this).text();
    // alert(thisText);
    h3Text.text(thisText);
    rowLeftSTExt.text(thisText);
    rowLeftSTExt1.text(leftTitle);
    donghua();

    })
    var work02 = $('a[href$="work02"]');
    console.log(work02);
    work02.on('click',function(){
    donghua();
    })
    // donghua();

    var textAttr = $('.container-right').find('.row');
    window.onhashchange = function() {
    var navLis = $('')
    var hash = window.location.hash;
    console.log(hash);
    if(hash) {
    var textData = hash.split('#')[1];
    console.log(textData);
    textAttr.removeClass('active')
    $('[data-name=' + textData + ']').addClass('active');
    lisW.removeClass('active');
    $(hash).addClass('active');
    }

    }; // TO
    var hash = window.location.hash;
    console.log(hash);
    if(hash) {
    var textData = hash.split('#')[1];
    console.log(textData);
    textAttr.removeClass('active')
    $('[data-name=' + textData + ']').addClass('active');
    lisW.removeClass('active');
    $(hash).addClass('active');

    }
    if(hash=='#work02'){
    donghua();
    }
    })

    function donghua() {
    var liLength = $('.logos').find('li').length;
    var lis = $('.logos').find('li');
    var i = 0;
    var play = setInterval(function() {
    lis.eq(i).show();
    i++;
    }, 1000);

    if(i <= liLength) {
    play;
    } else {
    clearInterval(play);
    }
    }

  • 相关阅读:
    UITextField小结
    由iPhone项目生成iPad项目
    ios界面动画小结
    UIImagePickerController Class
    Xcode调试相关小结
    cocos2d简易引导
    python 多个装饰器组合应用,实现面向切面之AOP编程
    python 元类型编程, 单例模式SingleTon的一种实现方式
    python 实现简单的PerformanceCountCallHandler装饰器
    wxpython 之 GDI(二)
  • 原文地址:https://www.cnblogs.com/adong69/p/8478565.html
Copyright © 2020-2023  润新知