Ich habe einige Links, die ich hervorheben möchte, wenn Sie sie auswählen, aber jeweils nur einen. Ich habe diesen JQuery-Code gefunden, kann ihn jedoch nicht zum Laufen bringen. Die Links werden nicht hervorgehoben, selbst wenn ich darauf klicke. Ich hatte eine wirklich einfache Javascript-Funktion, die die Farbe des Links mit dem Onlick änderte. Ich möchte jedoch, dass nur der zuletzt angeklickte Link hervorgehoben wird.

Die neue JQuery wird im Code vorgestellt. Es scheint, als sollte sie funktionieren. Ich weiß nur nicht, warum das nicht so ist. Die Javascript-Funktion selectedLink () habe ich verwendet, um die onlick-Methode aufzurufen. Ich bin bereit, entweder oder zu verwenden, ich möchte nur die Funktionalität.

 .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>
0
user5166162 13 Aug. 2015 im 16:49

5 Antworten

Beste Antwort

Code ist in Ordnung, wickeln Sie einfach um ein $(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>
2
joyBlanks 13 Aug. 2015 im 14:50

Vielleicht funktioniert das:

$(document).ready(function(){
     $('a').click(function(e){
            e.preventDefault();
            //All a tag having class highlight
            $('a.highlight').removeClass('highlight');
            $(this).addClass('highlight');
        });
    });
0
Juned Lanja 13 Aug. 2015 im 14:05

Versuche dies:

$('a').click(
    function(e){
    e.preventDefault();
    $(this).addClass('highlight').siblings().removeClass('highlight');
});
0
arunatebel 13 Aug. 2015 im 14:30

Entfernen Sie die Klasse für alle Elemente, anstatt die Klasse in .highlight zu entfernen

$(a).removeClass('highlight');
0
Nageshwar Reddy 13 Aug. 2015 im 13:51

Es ist möglicherweise nicht die Lösung, aber es sieht so aus, als ob Sie e.preventDefault() anstelle von e.preventDefault verwenden sollten.

0
user7890 13 Aug. 2015 im 13:54