如何在点击<a>标签时更改CSS链接？

Question

我一直在努力让我的锚标签工作,如果点击它,它会改变href指向颜色主题CSS的链接.

这是我到目前为止所得到的.我只是试图将其改为红色主题.

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"会阻止这种行为.