zoukankan      html  css  js  c++  java
  • 从一个页面跳转到另一个页面的指定位置,并实现显示隐藏

    //导航

    <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);
    }
    }

  • 相关阅读:
    P4097 [HEOI2013]Segment(李超线段树模板)
    P2155 [SDOI2008]沙拉公主的困惑
    BZOJ3675 [Apio2014]序列分割[斜率优化dp]
    hdu4261 Estimation[暴力dp+对顶堆]
    poj2374 Fence Obstacle Course[线段树+DP]
    poj1463 Strategic game[树形DP]
    CH5E02 [IOI1999]花店橱窗[暴力dp]
    CH5E01[NOIP2010] 乌龟棋[暴力]
    CH5702 Count The Repetitions[倍增dp]
    P1081 [NOIP2012]开车旅行[倍增]
  • 原文地址:https://www.cnblogs.com/adong69/p/8478565.html
Copyright © 2011-2022 走看看