javascript - 如何在点击 标签时更改 CSS 链接？

Question

我已经尝试了几个小时来让我的 anchor 标记正常工作，如果单击它，它会更改指向颜色主题 CSS 的链接的 href。

这是我到目前为止得到和发现的。我一直在尝试将其更改为红色主题。

html(删除列表标记之间的空格以防止由 inline-block 引起的视觉间隙)

<header>
  <ul>
   <li>
    <a id="theme_selector_red" href="" onclick="applyCSS('css/theme_red.css');"></a>
   </li>
   <li>
    <a id="theme_selector_green" href=""></a>
   </li>
   <li>
    <a id="theme_selector_blue" href=""></a>
   </li>
  </ul>
 </header>

链接标签

<link id="color_theme" type="text/css" rel="stylesheet" href="css/theme_blue.css">

javascript我以不同的方式尝试了 .attr() ，也尝试过删除和重置属性但没有成功。警报只是为了测试点击是否到达功能，是的，每次我点击链接时网站都会显示警报。

function applyCSS(css_link){
   $('#color_theme').attr("href", css_link);
   document.getElementById('color_theme').removeAttribute('href');
   document.getElementById('color_theme').setAttribute('href', css_link);
   alert('hey');
};

链接标签有效，当我点击链接时，它不会改变它的 href。 :(

Answer 1

将点击更改为:

onclick="applyCSS('css/theme_red.css'); return false;"

目前，applyCSS运行后，会跟随链接刷新页面。 “return false”将阻止这种行为。