4 Stimmen

Clay Nichols avatar

Gibt es eine Möglichkeit, das Ziel eines Lesezeichens hervorzuheben? (www.site.com/page.htm#bookmark)?

Gefragt el 10 de September, 2008
Wann wurde die Frage gestellt
4170 Ansichten
Anzahl der Besuche der Frage
4 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich möchte einen Link zu einem Lesezeichen auf einer Seite setzen (mysite.com/mypage.htm#bookmark) UND das Element, das mit einem Lesezeichen versehen wurde, visuell hervorheben (vielleicht mit einem roten Rahmen). Natürlich werden mehrere Elemente mit Lesezeichen versehen. Wenn also jemand auf #bookmark2 klickt, dann dass ein anderer Bereich würde hervorgehoben werden).

Ich kann mir vorstellen, wie man das mit .asp oder .aspx macht, aber ich würde es gerne einfacher machen. Ich dachte, es gäbe vielleicht eine clevere Möglichkeit, dies mit CSS zu tun.

WARUM ich mich dafür interessiere: - Ich möchte, dass unsere Programme mit einer Einkaufsseite verlinkt werden, auf der alle Programme aufgelistet sind. Ich verwende ein Lesezeichen, damit sie zu dem jeweiligen Programmbereich springen (site.com/shoppingpage#Programx), aber nur um es zu Offensichtlich Ich möchte die Seite, auf die verlinkt wird, tatsächlich hervorheben.

Gefragt el 10 de September, 2008 von Clay Nichols

Antworten

Zu viele Anzeigen?

11voto

Pat avatar
Pat Punkte 35602

In Ihrem css müssen Sie definieren

a.highlight {border:1px solid red;}

oder etwas Ähnliches

Dann mit jQuery,

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
    var id  = location.hash.substr(1); //Get the word after the hash from the url
    if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash
});

Um die Ziele beim Überfahren mit der Maus hervorzuheben, fügen Sie ebenfalls hinzu:

$("a[href^='#']")
    .mouseover(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).addClass('highlight');
    })
    .mouseout(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).removeClass('highlight');
    });
Beantwortet el 10 de September, 2008 von Pat (35602 Punkte )

6voto

chrisofspades avatar
chrisofspades Punkte 817

Sie können auch die target Pseudoklasse in CSS:

<html>
<head>

<style type="text/css">
div#test:target {
 background-color: yellow;
}
</style>

</head>
<body>

<p><b><a href="#test">Link</a></b></p>

<div id="test">
Target
</div>

</body>
</html>

Leider wird die Ziel-Pseudoklasse weder vom IE noch von Opera unterstützt. Wenn Sie also nach einer universellen Lösung suchen, ist dies möglicherweise nicht ausreichend.

Beantwortet el 11 de September, 2008 von chrisofspades (817 Punkte )

2voto

Kevin avatar
Kevin Punkte 1261

Verwenden Sie Ihr bevorzugtes JS-Toolkit, um dem Element, das den Anker enthält (oder darin enthalten ist), eine "Highlight"-Klasse (oder was auch immer) hinzuzufügen.

Etwa so:

jQuery(location.hash).addClass('highlight');

Natürlich müssten Sie das onready oder click aufrufen, wenn Sie wollen, dass es durch andere Links auf der Seite ausgelöst wird, und Sie werden die Klasse .highlight definiert haben wollen. Sie könnten auch Ihre jQuery-Selektor Traverse nach oben oder unten je nach dem Container Sie hervorgehoben werden soll.

Beantwortet el 10 de September, 2008 von Kevin (1261 Punkte )

0voto

GateKiller avatar
GateKiller Punkte 71039

Ich denke, man könnte diese Informationen mit JavaScript und Cookies speichern, um die Lesezeichen zu speichern, und sogar einen Spritzer Ajax hinzufügen, wenn man mit einer Datenbank interagieren möchte.

Mit CSS wäre nur die Gestaltung möglich. Sie müssten dem Anker mit Lesezeichen eine Klasse zuweisen, die Sie in Ihrer CSS-Datei finden.

CSS verfügt auch über den Selektor a:visited, der für die Gestaltung von Links verwendet wird, die im Browserverlauf gefunden werden.

Beantwortet el 10 de September, 2008 von GateKiller (71039 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X