Html 使用<；在单个页面上显示/隐藏元素；a>；或<；span>；

我使用jQuery在单个页面上显示或隐藏divs元素，具体取决于单击的内容：

HTML:

JS:

我的问题是，

element1

和

element2

作为

元素是否合适，即使它们在技术上没有链接到另一个页面？我想这样做，使风格的元素似乎是链接到用户。或者，我应该让它们成为

元素，然后使用CSS将它们的样式设置为链接吗？有什么区别吗？

选项会被认为是糟糕的编码风格吗

---

我的问题是，

element1

和

element2

是否适合

屏幕阅读器将解析页面并为视力受损者提供可听到的内容。视力受损者扫描页面的一种方式是在页面上获取“链接列表”。如果您在体验之间导航（显示和隐藏内容），则使用
按钮或
元素是有意义的。使用
SPAN
是模棱两可的，不利于访问web

如果另一个用户有禁止使用鼠标（或等效物）的残疾，并且仅限于页面的键盘导航，
SPAN
在页间切换时将永远无法聚焦，而
a
元素或
按钮将无法聚焦

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



指定上述HREF属性将防止您的页面跳转，并允许您的javascript按照您的意愿处理转换。
一点也不……这可能会对您的seo产生一些影响，但我对该领域不太熟悉，因此无法确定。我知道这不是一项要求；我的问题更多的是风格问题，比如，一个有经验的开发人员是否会倾向于使用
。如果你想要的是超链接，
。
.visible { display: block; }
.invis { display: none; }

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

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