1

Hope someone can help. I'm trying to dynamically change hrefs on a page and then point the user to a url which includes a fragment as:

$(document).ready(function(){
    if (document.location.pathname.indexOf('cab2') > -1){
        document.getElementsByClassName('resourceLink').setAttribute('href','http://www.myserver.net/cab2/#linkResources');
        } else {
            document.getElementByClassName('resourceLink').setAttribute('href','http://www.myserver.net/cab/#linkResources');
        };
});

In the HTML I'm using several links like this:

<a class="resourceLink" href="" title="Link to Resources section" target="_blank">Resources</a>

What I was hoping for was the script would check what url the visitor had used to arrive at the site, either

What happens though is the link opens up the base page (www.myserver.net/cab or cab2) and not the #fragment page.

What am I doing wrong? My thanks for your interest.

Roger W
  • 107
  • 1
  • 4
  • 16

1 Answers1

3

.getElementsByClassName() returns an HTMLCollection, not a single element. You can use .each() to iterate all .resourceLink elements, .attr() to set href attribute value

$(document).ready(function(){
   var link =  document.location.pathname.indexOf('cab2') > -1 ? "cab2" : "cab";
    $('.resourceLink')
    .each(function() {
       $(this)
       .attr('href','http://www.myserver.net/'+ link +'#linkResources')
    });
});
guest271314
  • 1
  • 15
  • 104
  • 177
  • 1
    Thanks @guest271314, still can't get it to work though but your comment has got me started. Note you've got a minor typo in your var link statement, an extra closing bracket. – Roger W Aug 29 '16 at 16:12
  • @RogerW _"still can't get it to work"_ What is current issue? Is last forward slash `/` necessary? – guest271314 Aug 29 '16 at 16:15
  • Yep, it is still loading the base page - www.myserver.net/cab/ (or cab2) and not the appended fragment i.e. www.myserver.net/cab/#linkResources. Thanks for your help! – Roger W Aug 29 '16 at 16:21
  • Thanks for your updates @guest271314 but it still isn't working. Might this be anything to do with the fact that I'm calling this from a div on the main page (index.html) which then loads a new html page into index.html and unhides it's content i.e. the page that this code is on is actually on about.html which has been loaded into index.html. – Roger W Aug 29 '16 at 16:40
  • Thanks @guest271314, not sure I'm up to http://plnkr.co/ but I can show you it in action. Load http://www.rogw.net/cab2/ then click the 'About' tab, the first 3 links on that page to the Resources tab should open a new window with the url www.rogw.net/cab2/#linkResources. If you type www.rogw.net/cab2/#linkResources directly into your browser it opens as it should. – Roger W Aug 29 '16 at 16:49
  • 1
    @RogerW `javascript` at Answer does not appear at link? You should be able to reproduce issue at plnkr – guest271314 Aug 29 '16 at 17:05
  • Thanks again @guest271314. Think you might have got me going in the right direction. I have my question's javascript (sorry, your proposed solution) embedded within about.html, I think I need to migrate it to the existing js file (js-tabs.js) I'm using to display the tab items within index.html and then make a call to it from within about.html. – Roger W Aug 29 '16 at 17:14