使用 <a> 或 <span> 的单个页面上的 Show/Hide 个元素

Question

我根据点击的内容使用 jQuery 在单个页面上显示或隐藏 div 元素：

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

我的问题是，element1 和 element2 是否适合作为 <a> 元素，即使它们在技术上 link 不属于另一个页面？我想这样做，以便从风格上看，元素对用户来说似乎是 links。或者，我应该让它们成为 <span> 元素，然后使用 CSS 将它们设置为看起来像 link 的样式吗？有什么不同吗？ <a> 选项会被认为是错误的编码风格吗？

Answer 1

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

不要求锚元素link到另一个页面。当与 href 属性一起使用时，锚元素会创建一个 link。 link 可以去任何地方：在同一个页面中，e-mail 地址，另一个页面等。

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

Answer 2

屏幕阅读器将解析页面并为视障人士提供可听内容。视障人士扫描页面的方法之一是在页面上获得 "list of links"。如果您在体验之间导航（显示和隐藏内容），使用 BUTTON 或 A 元素是有意义的。使用 SPAN 是不明确的，并且不利于可访问的网络。

如果另一个用户有残疾，无法使用鼠标（或等效设备），并且仅限于页面的键盘导航，则 SPAN 在页面中切换时永远不会获得焦点，而A 元素或 BUTTON 将。

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

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

使用 <a> 或 <span> 的单个页面上的 Show/Hide 个元素

Show/Hide elements on a single page using <a> or <span>

html

css

onclick

display