Show/Hide elements on a single page using or

Question

I am showing or hiding divs elements on a single page using jQuery depending on what is clicked:

HTML:

<div id='aboutPage' class='visible'>
//content
</div>

<div id='contactPage' class='invis'>
//content
</div>

CSS:

.visible { display: block; }
.invis { display: none; }

JS:

$('#element1').on('click', {clickedTab: 'aboutTab'}, changeTab);
$('#element2').on('click', {clickedTab: 'contactTab'}, changeTab);

var currentTab = 'about';

function changeTab(event)
{
//if-else ladder to make invis the prior current tab
if (currentTab == 'about')
    if (event.data.clickedTab != 'aboutTab')
        $('#aboutPage').removeClass('visible').addClass('invis');
    else return;
else if (currentTab == 'contact')
    if (event.data.clickedTab != 'contactTab')
        $('#contactPage').removeClass('visible').addClass('invis');
    else return;

//if-else ladder to change the current tab
if (event.data.clickedTab == 'aboutTab') {
    currentTab = 'about';
    $('#aboutPage').removeClass('invis').addClass('visible');
}
else if (event.data.clickedTab == 'contactTab') {
    currentTab = 'contact';
    $('#contactPage').removeClass('invis').addClass('visible');
}

My question is, is it appropriate for element1 and element2 to be <a> elements, even though they don't technically link to another page? I would like to do this so that stylistically the elements appear to be links to the user. Or, should I make them <span> elements and then just style them to look like links using CSS? Is there any difference? Would the <a> option be considered bad coding style?

It may have some effect on your seo, but I'm not much familier in that field so can't be sure. — ab29007, Jan 19 '17 at 02:22

score 2 · Accepted Answer · answered Jan 19 '17 at 02:27

2

My question is, is it appropriate for element1 and element2 to be <a> elements, even though they don't technically link to another page?

There is no requirement that an anchor element link to another page. An anchor element, when used with the href attribute, creates a link. That link can go anywhere: within the same page, an e-mail address, another page, etc.

https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

answered Jan 19 '17 at 02:27

Michael Benjamin

346,931
104
581
701

1

I know it's not a requirement; my question was more one of style, as in, would an experienced developer tend to use `` or `` for this purpose? Still, your answer indicates that using `` is perfectly acceptable in this context, so I've marked it as solved. I ended up using `` in conjunction with [jump links](http://stackoverflow.com/questions/8424785/link-to-a-section-of-a-webpage). – thekitchensink Jan 19 '17 at 03:16
1

If it's a hyperlink you're after, `` is the right way to go. Jump links are a perfect example. In fact, the link in my answer is the target of a jump link from the table of contents in the [**specification**](http://www.w3.org/TR/html5/text-level-semantics.html). – Michael Benjamin Jan 19 '17 at 03:20

score 1 · Answer 2 · answered Jan 19 '17 at 03:31

Screen Readers will parse pages and provide content audibly for the visually impaired. One of the ways the visually impaired scan a page is to get a "list of links" on the page. If you are navigating between experiences (showing and hiding content), it makes sense to use a BUTTON or an A element. Using a SPAN is ambiguous, and does not make for an accessible web.

If another user has a disability which prohibits the usage of a mouse (or equivalent), and is limited to keyboard navigation of a page, a SPAN will never achieve focus when tabbing through a page, whereas an A element or a BUTTON will.

<a href="javascript:void(0);">your link</a>

Specifying the aforementioned HREF attribute will prevent your page from jumping around, and allow your javascript to handle the transitions as you intend.

Show/Hide elements on a single page using or

2 Answers2