点击链接切换Bootstrap主题失效，求问题排查建议

嘿，我来帮你排查下这个问题～你的思路是对的：通过jQuery替换link标签的href来切换主题，但有几个小细节没处理好，导致功能没生效：

1. 最核心的问题：a标签的默认跳转行为 #

你用的是<a>标签，而且设置了href=""，点击时浏览器会默认刷新当前页面——这就导致你的主题切换代码刚执行到一半，页面就重新加载了，自然看不到效果。

两种修复方式： #

方法一：阻止a标签的默认跳转

在点击事件里添加event.preventDefault()，告诉浏览器不要执行默认的跳转行为：

$(document).ready(function () {
    $('#Cyborg').click(function (event) {
        event.preventDefault(); // 关键：阻止页面刷新
        $('#theme').attr('href', 'css/bootstrapcyborg.css');
    });
    $('#Lux').click(function (event) {
        event.preventDefault(); // 关键：阻止页面刷新
        $('#theme').attr('href', 'css/bootstraplux.css');
    });
});

方法二：换成button标签（更推荐）

因为这个元素本质是“按钮”，不是跳转链接，换成<button>更符合语义，还不用额外写阻止默认行为的代码：

<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>

换完之后，你原来的jQuery代码直接就能用，不需要修改。

2. 验证CSS文件路径是否正确 #

确认你的css/bootstrapcyborg.css和css/bootstraplux.css文件确实存在于项目的对应目录里。可以按F12打开浏览器开发者工具，切换到「网络」标签，点击主题按钮后看看有没有加载对应的CSS文件——如果显示404错误，说明路径写错了，得调整成正确的路径。

3. 可选：处理浏览器缓存问题 #

有时候浏览器会缓存旧的CSS文件，导致新主题没立刻生效。可以在CSS路径后面加个随机参数，强制浏览器加载最新的文件：

$('#Cyborg').click(function (event) {
    event.preventDefault();
    // 加个时间戳参数，避免缓存
    $('#theme').attr('href', 'css/bootstrapcyborg.css?' + new Date().getTime());
});

完整的修复后代码示例 #

<!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"> 
            <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> 
    </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>

内容的提问来源于stack exchange，提问作者varun