Javascript/JQuery-点击时一次突出显示一个链接

Javascript/JQuery- Highlighting one link at a time on click

本文关键字：显示 链接 一个 一次 JQuery- Javascript      更新时间：2023-09-26

我有一些链接，我希望在您选择它们时突出显示，但一次只能显示一个。我找到了这个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>

不是为。highlight移除class，而是为所有a元素移除class 

$(a).removeClass('highlight');

这可能不是解决方案，但看起来你应该使用e.preventDefault()而不是e.preventDefault

可以这样做:

$(document).ready(function(){
     $('a').click(function(e){
            e.preventDefault();
            //All a tag having class highlight
            $('a.highlight').removeClass('highlight');
            $(this).addClass('highlight');
        });
    });

试试这个:

$('a').click(
    function(e){
    e.preventDefault();
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
相关文章：