html - 如何在单击链接时更改引导主题
问题描述
我想在单击该主题名称的链接时在引导主题之间切换这里是 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">
<title>Theme Changer</title>
<meta name="description" content="" />
<meta name="keywords" content="">
<link id="theme" rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<div class="row">
<div class="col-md-6">
<a id="Cyborg" href="" class="btn btn-block">Cyborg</a>
</div>
<div class="col-md-6">
<a id="Lux" href="" class="btn btn-block">Lux</a>
</div>
</div>
<footer>
<p>Theme Changer</p>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#Cyborg').click(function () {
$('#theme').attr('href', 'css/bootstrapcyborg.css');
});
$('#Lux').click(function () {
$('#theme').attr('href', 'css/bootstraplux.css');
});
});
</script>
</body>
</html>
我已经为初始页面加载 css 创建了链接,然后单击其中一个链接,我href
用我在 jquery 中分配的原始属性替换了原始属性。任何人都可以建议我哪里出错了。
解决方案
我可以想到几个解决方案,但我会推荐第一个。
- 而不是
a
标签使用button
没有href
属性。
<div class="col-md-6">
<button id="Cyborg" class="btn btn-block">Cyborg</button>
</div>
<div class="col-md-6">
<button id="Lux" class="btn btn-block">Lux</button>
</div>
- 添加
href="javascript:void(0)"
或href="#"
到您的a
标签
<div class="col-md-6">
<a id="Cyborg" href="javascript:void(0)" class="btn btn-block">Cyborg</a>
</div>
<div class="col-md-6">
<a id="Lux" href="javascript:void(0)" class="btn btn-block">Lux</a>
</div>
或者
<div class="col-md-6">
<a id="Cyborg" href="#" class="btn btn-block">Cyborg</a>
</div>
<div class="col-md-6">
<a id="Lux" href="#" class="btn btn-block">Lux</a>
</div>
但请记住,单击'#'
ashref
会带您回到页面顶部。a
并且还遵循https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a这是不好的做法
锚元素经常被滥用为假按钮,将它们的 href 设置为 # 或 javascript:void(0) 以防止页面刷新,然后监听它们的点击事件。
在复制/拖动链接、在新选项卡/窗口中打开链接、添加书签或 JavaScript 正在加载、出错或被禁用时,这些虚假的 href 值会导致意外行为。它们还会向屏幕阅读器等辅助技术传达不正确的语义。
改用 a 。通常,您应该只使用超链接导航到真实的 URL。
- 防止在点击时触发默认浏览器操作
$('#Cyborg').click(function (e) {
e.preventDefault();
$('#theme').attr('href', 'css/bootstrapcyborg.css');
});
$('#Lux').click(function (e) {
e.preventDefault();
$('#theme').attr('href', 'css/bootstraplux.css');
});
- 完全删除href属性 - 然后您可能需要按照
a
自己的方式设置标签样式,因为浏览器将删除锚样式
说明: 因为#Cyborg
or#Lux
是锚元素,所以它们在单击时的默认浏览器行为是启动到其 URL 的导航,因为您在href
浏览器中有空字符串只会重新加载页面。然后浏览器回到第一次加载后的状态,你看不到任何效果。
希望我正确理解您,这将有所帮助
推荐阅读
- discord.js - 如何让我的机器人在没有命令的情况下重复一条消息?
- mysql - SQL:如何查询以获取不包含 3 个字母 'r' 的字符串?
- tensorflow - 对加载有 image_dataset_from_directory 的测试集使用堆叠集成方法
- java - flatMap 三重嵌套流
- reactjs - 在正文中发送位置数据的格式
- reactjs - “.mdx”文件格式是否仅被 React.js 支持/使用
- javascript - 如何在 Nuxt 中制作随机提示选择器?
- html - 已经尝试了一切,但@media 屏幕无法正常工作。有什么解决方法吗?
- javascript - 如何从 puppeteer 获取返回值?
- apache-kafka - 发送到 kafka 连接时,Kafka Avro Producer (kafka-avro-console-producer) 架构错误