javascript - Javascript/JQuery-单击一次突出显示一个链接

当您选择链接时，我想突出显示一些链接，但一次只能链接一个。我找到了此JQuery代码，但是无法正常工作。即使单击，链接也不会突出显示。我有一个非常简单的Javascript函数，该函数通过onlick更改了链接的颜色。但我希望它仅突出显示最近单击的链接。

新的JQuery出现在代码中，看起来好像应该可以工作，我只是不知道为什么不可以。我曾经调用过onlick方法的Javascript函数selectedLink（）。我愿意使用或者，或者我只想要功能。

 .highlight {
   color: #3385D6;
   border: 1px solid;
   border-color: #BBBBBB;
   background:#70AAE2;
   font-weight: bold;
  }

 function selectedLink(id){
  var sublink = document.getElementById(id);
      sublink.style.background = "#CCCCCC";
      sublink.style.color = "#3385D6";
      sublink.style.fontWeight = "bold";
      sublink.style.border = "1px solid";
      sublink.style.borderColor = "#BBBBBB";
        }
<input type="radio" name="UItab" id="tabf" >
<label for="tabf"><span>Menu Item</span></label>
   <div>
    <div>
        <ul class="sub-menu">
        <a href="#"><li id="">SecondLevel A</li></a></td>
        <a href="#" onclick="toggle('togglebox');"><li id="">SecondLevel B</li></a>
        <a href="#"><li id="">SecondLevel C</li></a>
        </ul>
    </div>
        <div id="togglebox">
                            <a href="#"><li id="">ThirdLevel A</li></a>
                            <a href="#" onclick="toggle_visibility('barbox');"><li id="">ThirdLevel B</li></a>
                            <a href="#" onclick="toggle_visibility('piebox');"><li id="">ThirdLevel C</li></a>
        </div>
                <div id="barbox">
                        <a  href="#"><li id="">Fourth Level A</li></a>
                        <a  href="#"><li id="">Fourth Level B</li></a>
                        <a  href="#"><li id="">Fourth Level C</li></a>
                </div>
               <div id="piebox">
                        <a  href="#"><li id="">Fourth Level A</li></a>
                        <a  href="#"><li id="">Fourth Level B</li></a>
                        <a  href="#"><li id="">Fourth Level C</li></a>
                </div>
<script>
$('a').click(
function(e){
e.preventDefault;
$('.highlight').removeClass('highlight');
$(this).addClass('highlight')
});
</script>

最佳答案

代码很好，只需环绕$(function(){/*here*/});

$(function () {
    $('a').click(function (e) {
        e.preventDefault();
        $('.highlight').removeClass('highlight');
        $(e.target).addClass('highlight');
    });
});

function selectedLink(id) {
    var sublink = document.getElementById(id);
    sublink.style.background = "#CCCCCC";
    sublink.style.color = "#3385D6";
    sublink.style.fontWeight = "bold";
    sublink.style.border = "1px solid";
    sublink.style.borderColor = "#BBBBBB";
}

function toggle_visibility(s) {}

.highlight {
    color: #3385D6;
    border: 1px solid;
    border-color: #BBBBBB;
    background:#70AAE2;
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="UItab" id="tabf" >
<label for="tabf"><span>Menu Item</span></label>
<div>
<div>
  <ul class="sub-menu">
	<a href="#"><li id="">SecondLevel A</li></a>
	<a href="#" onclick="toggle('togglebox');"><li id="">SecondLevel B</li></a>
	<a href="#"><li id="">SecondLevel C</li></a>
  </ul>
</div>
<div id="togglebox">
  <a href="#"><li id="">ThirdLevel A</li></a>
  <a href="#" onclick="toggle_visibility('barbox');"><li id="">ThirdLevel B</li></a>
  <a href="#" onclick="toggle_visibility('piebox');"><li id="">ThirdLevel C</li></a>
  <a href="#" onclick="toggle_visibility('linebox');"><li id="">ThirdLevel D</li></a>
  <a href="#" onclick="toggle_visibility('tablebox');"><li id="">ThirdLevel E</li></a>
  <a href="#" onclick="toggle_visibility('gaugebox');"><li id="">ThirdLevel F</li></a>

</div>
<div id="barbox">
  <a  href="#"><li id="">Fourth Level A</li></a>
  <a  href="#"><li id="">Fourth Level B</li></a>
  <a  href="#"><li id="">Fourth Level C</li></a>
</div>

关于javascript - Javascript/JQuery-单击一次突出显示一个链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31990112/