0

私はそれ自体でうまく機能するタブシステムを持っています。問題は、同じようなタブ システムを持つ別のページへのリンクをクリックすると、たとえクラスが異なっていても、過去のハッシュが保存されていることです。

たとえば、それらが 1 ページにあり、開いたタブで次のような URL が終了するとします: /dept/waste-recycling-programs?whatToRecycle#whatToRecycle

次に、まったく別の URL /dept/facilities/?goals2013#whatToRecycle を持つ 2 ページに移動します。

そのため、誰かが「2013 Goals」をクリックすると、別の URL につながり、「?goals2013」が追加されますが、その後に「#whatToRecycle」が追加されます。タブ システムを使用して、前のページで最後にクリックされたタブはどれですか。

ページの読み込み時にすべてを消去する関数を呼び出す方法を理解できたら? そして、それはうまくいくはずだと私は考えています。

問題は、左側のナビゲーション バーに特定のタブへのすべてのリンクが含まれているため、誰かがページ 1 またはページ 2 に移動してから、たとえば 3 番目のタブをクリックする必要がないことです。いずれかのページの 3 番目のタブをクリックし、そのページをヒットすると、そのタブが開きます。

リンクのリストの HTML:

<ul class="enviroNav">
    <li class="bottomBorder"><a href="?">WHAT WE DO</a></li>
    <li class="liWithSubs"><a href="/departments/site-facilities/environment">ENVIRONMENT</a></li>
    <li><a href="/departments/site-facilities/iso-14001?iso14001">ISO 14001</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/iso-14001?environmentalPolicy">-Environmental Policy</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/iso-14001?impactAreas">-Impact Areas</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/iso-14001?goals2013">-2013 Goals</a></li>
    <li><a href="/departments/site-facilities/environment/waste-recycling-programs?whatToRecycle">Recycling/Waste</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?whatToRecycle">-What To Recycle</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?whereToRecycle">-Where to Recycle</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?quickTips">-Quick Tips</a></li>
    <li class="doubleIndentLi"><a href="/departments/site-facilities/environment/waste-recycling-programs?seeResults">-See Results</a></li>
    <li class="bottomBorder"><a href="#">Energy</a></li>
    <li class="liWithSubs"><a href="#">COMMUNITY</a></li>
    <li><a href="#">-Upcoming Events</a></li>
    <li class="bottomBorder"><a href="?">-Past Activities</a></li>
    <li class="liWithSubs"><a href="?">HOW WE&#39;RE DOING</a></li>
    <li><a href="#">-See the Results</a></li>
    <li class="bottomBorder"><a href="#">-Success Stories</a></li>
    <!--    <li class="bottomBorder"><a href="#">WHY WE CARE</a></li>
    <li class="bottomBorder"><a href="#">EMPLOYEE WELLNESS</a></li>-->
    <li class="bottomBorder"><a href="/departments/site-facilities/ehs-training">ENVIRONMENTAL HEALTH &amp; SAFETY(EHS) PROGRAM</a></li>
    <li><a href="?">COMMUNITY LINKS</a></li>
</ul>

このルーチンは次のように機能します。

    function setupSubNav(){
  pathName = window.location.href;
  $('.hiddenSection').css('display','none');
  pathArray = pathName.split('#');
  param = pathArray[pathArray.length-1];
  if(pathArray.length>1){
    showWasteSection(param,$('.' + param + 'Trigger'));
  }
  else
  {
     if ($('body.fervens-a .pageTabsWaste li')) {
        var sectionNameWaste = $($('body.fervens-a .pageTabsWaste li')[0]).attr('class').split('Trigger')[0];
            showWasteSection(sectionNameWaste, $($('body.fervens-a .pageTabsWaste li')[0]));
        }
  }
    $('body.fervens-a .pageTabsWaste li').click(function(){
        if (!($(this).hasClass('current'))) {
            var sectionNameWaste = $(this).attr('class').split('Trigger')[0];
            showWasteSection(sectionNameWaste, $(this));
        }
    });
}
    function showWasteSection(sectionNameWaste,$navObj) {
    if (sectionNameWaste != 'whatToRecycle' && sectionNameWaste != 'whereToRecycle' &&       sectionNameWaste != 'quickTips' && sectionNameWaste != 'seeResults') {
        sectionNameWaste = 'whatToRecycle';
        $navObj = $($('body.fervens-a .pageTabsWaste li')[0]);
    }
        $('body.fervens-a .pageTabsWaste li').removeClass('current');
        $navObj.addClass('current');
        $('.hiddenSection').css('display','none');
        $('#' + sectionNameWaste + 'Content').css('display','block');
        window.location.hash = sectionNameWaste;
    }

それにもかかわらず、私はそれを少し前にまとめましたが、当時は複数のページで使用していなかったので、URL を強制的に消去しようとしています。これは Drupal 6 サイト内にあり、内部のイントラネット上にあるため、IE7+ をサポートする必要があります。HTML5ストレージなどを台無しにすることはできません。

ナビゲーション リストのリンクをクリックしたときに URL を消去する方法はありますか? パフォーマンスの問題や反復が何らかの理由で問題になる場合は、私は気にしません。

4

2 に答える 2

1

あなたが達成したいことを完全には理解していないかもしれませんが、これにより、URLに「？」が含まれている場合、場所の最後にハッシュを追加する機能が回避されます。シンボル。

function showWasteSection(sectionName, $navObj) {
    if (sectionName != 'whatToRecycle' && sectionName != 'whereToRecycle' && sectionName != 'quickTips' && sectionName != 'seeResults') {
        sectionName = 'whatToRecycle';
        $navObj = $($('body.fervens-a .pageTabsWaste li')[0]);
    }
    $('body.fervens-a .pageTabsWaste li').removeClass('current');
    $navObj.addClass('current');
    $('.hiddenSection').css('display', 'none');
    $('#' + sectionName + 'Content').css('display', 'block');
    var location = String(document.location);
    if (location.indexOf("?") < 0)
        window.location.hash = sectionName;
}
于 2013-03-21T20:25:56.650 に答える
0

完全を期すために、答えはすべてのページのすべてのセクション名をパラメーターをチェックする if ステートメントに追加することでした。

function showWasteSection(sectionName, $navObj) {
    if (sectionName != 'whatToRecycle' && sectionName != 'whereToRecycle' && sectionName != 'quickTips' && sectionName != 'seeResults' && sectionName != 'iso14001' && sectionName != 'environmentalPolicy' && sectionName != 'impactAreas' && sectionName != 'goals2013' && sectionName != 'isoDocs') {
        sectionName = 'whatToRecycle';
        $navObj = $($('body.fervens-a .pageTabsWaste li')[0]);
    }
    $('body.fervens-a .pageTabsWaste li').removeClass('current');
    $navObj.addClass('current');
    $('.hiddenSection').css('display', 'none');
    $('#' + sectionName + 'Content').css('display', 'block');
    var location = String(document.location);
    if (location.indexOf("?") < 0)
        window.location.hash = sectionName;
}

最後に var の場所を追加し、? を削除します。(上記のHanletの礼儀) おまけとしてURLをクリーンアップしたので、もう一度ありがとう!

于 2013-03-21T22:02:44.317 に答える