"Clearing url" removing hash between separate pages

Question

I have a tab system that works great on its own. The problem is that should someone click a link to another page with a simlar tab system, even with different classes, the past hash is being stored.

So, say they are on page 1 and the tab opened ends the url like: /dept/waste-recycling-programs?whatToRecycle#whatToRecycle

then, going to page 2, which has a completely different url, /dept/facilities/?goals2013#whatToRecycle

So someone had clicked on "2013 Goals" which leads to a different url and adds "?goals2013" like it should, but then it appends "#whatToRecycle" after that. Which was the last tab clicked on in the previous page with a tab system.

If I can just figure out how to call some function at page load that erases all ? and on, then it should work, I'm thinking.

The problem is that a left nav bar has all links to the specific tabs so that someone doesn't have to come to either page 1 or page 2 and then, click on say the third tab. They click on what would be the third tab on either page, hit the page and that tab is open.

HTML for the list of links:

<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>

This routine works:

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

and despite that I put that together some time ago, I didn't use it on more than one page back then so now I'm trying to force a clean wipe of the url. This is within a Drupal 6 site and it's on an intranet, internal so I have to support IE7+. Can't mess with the HTML5 storage or such.

Is there a way to wipe the url on clicking any link in the nav list? I'm not concerned with performance issues or iterations if that somehow figures in.

Answer 1

For completeness, the answer was to add all section names from all pages in an if statement checking the parameter:

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

adding the var location towards the end and removing the ? (courtesy of Hanlet, above) cleaned up the url as a bonus, so thanks for that one again!

Answer 2

Maybe I don't completely understand what it is you want to accomplish, but this will avoid the function to append the hash at the end of the location, if the url contains the "?" symbol.

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