Klicken Sie auf Hyperlink und CSS der ID ändern

Question

Ich denke, der Titel ist offensichtlich. Ich habe Hyperlinks auf meiner Seite wie;

<a href="#box1">LINK1</a> 
<a href="#box2">LINK2</a> 

<div id="box1"> 
content 
</div> 
<div id="box2"> 
content 
</div> 

box1 und box2 hat keinen Hintergrund, aber wenn ich die link1 klicken und auf box1 zu gehen, ist es eine Möglichkeit, die CSS dieses besuchte Feld zu ändern?

Ein einfacher Entwurf in JsFiddle

Answer 1

Extract id von hash Eigenschaft

Als Hash #box1 zurückkehrt, könnte es als id

Selektor verwendet werden

Verwenden Sie attribute starts with Wählen Sie oder wählen #box(Anything) Elemente

$('a[href^="#box"]').on('click', function() { 
 
    $(this.hash).css('background', 'green'); 
 
});

div { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid #ccc; 
 
} 
 
#c:focused { 
 
    background #d00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="#box1">LINK1</a> 
 
<a href="#box3">LINK2</a> 
 
<a href="#box2">LINK3</a> 
 

 
<div id="box1"> 
 
    content1 
 
</div> 
 
<div id="box2"> 
 
    content2 
 
</div> 
 
<div id="box3"> 
 
    content3 
 
</div>

Answer 2

ein einfaches onclick Event hinzufügen:

<a href="#box1" onclick="$('#box1').css({backgroundColor: 'yellow'})">LINK1</a> 

Answer 3

Verwenden .click() Ereignis Verweis zu erhalten Element geklickt.

$(".link").click(function() { // create click event for anchor tag using class 
 
    var href = $(this).attr("href"); // get href value 
 
    href = href.replace("#",""); // remove # from href 
 
    $(".content").css("color","black"); // first change color to back of all div 
 
    $("#"+href).css("color","red"); // change css of div using href value as id 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#box1" class="link">LINK1</a> 
 
<a href="#box2" class="link">LINK2</a> 
 

 
<div id="box1" class="content"> 
 
content 
 
</div> 
 
<div id="box2" class="content"> 
 
content 
 
</div>

Answer 4

Eine Lösung jQuery ist die folgende Verwendung:

$(function(){ 
 
    // attach a click handler for all links having the class js-link. 
 
    $(".js-link").click(function(){ 
 

 
     // clear the background of all boxes. 
 
     $(".js-box").css("background","000"); 
 
     
 
     // find the corresponding box's id. 
 
     var box = $(this).data("target"); 
 
     
 
     // sets it's background. 
 
     $(box).css("background", "#d00"); 
 
    }); 
 
});

div{ 
 
    width:100%; 
 
    height:400px; 
 
    border:1px solid #ccc; 
 
} 
 
#c:focused{ 
 
    background #d00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#box1" class="js-link" data-target="#box1">LINK1</a> 
 
<a href="#box3" class="js-link" data-target="#box2">LINK2</a> 
 
<a href="#box2" class="js-link" data-target="#box3">LINK3</a> 
 
    
 
<div id="box1" class="js-box"> 
 
    content1 
 
</div> 
 
<div id="box2" class="js-box"> 
 
    content2 
 
</div> 
 
<div id="box3" class="js-box"> 
 
    content3 
 
</div>