我正在使用 SvelteKit,并且尝试渲染一个锚元素,为没有 JavaScript 的用户打开登录页面,但如果用户启用了 JavaScript,则渲染一个打开模态的按钮,以获得更好的用户体验。我怎样才能做到这一点?
目前,我正在像这样实现它(该组件接受 href 并将其呈现为样式为按钮的锚元素):
<Button
href="/login"
on:click={(e) => {
e.preventDefault();
modalStore.trigger(modal);
}}
id="toggleAuthBtn"
>
Login
</Button>
然而,这对于可访问性不太友好,因为它被渲染为锚元素。
在这两种情况下我都会使用锚元素。显示模式时,您可能希望更改 URL,以便它包含指示显示模式的内容,以便用户可以将 URL 添加为书签/将 URL 发送给其他人,并且在访问该 URL 时将立即显示模式。
但如果你愿意的话,将其显示为按钮并没有什么问题,但是如果用户启用了客户端 JS,我会有条件地向锚元素添加一个类,将其样式设置为看起来像按钮。