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?

Answer 1

我的问题是，element1和element2成为<a>元素是否合适，即使它们在技术上没有链接到另一个页面？

不要求锚元素链接到另一个页面。锚元素与href属性一起使用时，会创建一个链接。该链接可以在任何地方：在同一页面内，电子邮件地址，另一页面等。

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

Answer 2

屏幕阅读器将解析页面并为视障人士提供可听见的内容。视障人士扫描页面的方法之一是获取链接列表＆＃34;在页面上。如果您在体验之间导航（显示和隐藏内容），则使用BUTTON或A元素是有意义的。使用SPAN是不明确的，并不适用于可访问的网站。

如果其他用户有残疾禁止使用鼠标（或等效物品），并且仅限于页面的键盘导航，则SPAN在浏览页面时永远不会获得焦点，而A {1}}元素或BUTTON会。

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

指定上述HREF属性将阻止您的页面跳转，并允许您的javascript按照您的意图处理转换。

使用<a> or <span>

2 个答案: