Есть ли способ выделить цель закладки? (Www.site.com/page.htm#bookmark)? - PullRequest
Новая
       36

Есть ли способ выделить цель закладки? (Www.site.com/page.htm#bookmark)?

2 голосов
/ 10 сентября 2008

Я хочу сделать ссылку на закладку на странице (mysite.com/mypage.htm#bookmark) И визуально выделить элемент, который был добавлен в закладки (возможно, с красной рамкой). Естественно, будет несколько закладок. Так что, если кто-то нажмет на # bookmark2, тогда будет выделена другая область).

Я вижу, как это сделать с помощью .asp или .aspx, но я бы хотел сделать это проще, чем это. Я подумал, что, может быть, есть умный способ сделать это с помощью CSS.

ПОЧЕМУ Я заинтересован: - Я хочу, чтобы наши программы ссылались на страницу с покупками, в которой перечислены все программы на ней. Я использую закладку, поэтому они переходят в определенную программную область (site.com/shoppingpage#Programx), но просто чтобы сделать ее очевидной Я бы хотел выделить страницу, на которую ссылается.

Ответы [ 4 ]

9 голосов
/ 10 сентября 2008

В вашем css вы должны определить 

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

или что-то похожее

Затем с помощью 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
});

Чтобы выделить цели при наведении мыши, также добавьте: 

$("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');
    });
6 голосов
/ 11 сентября 2008

Вы также можете использовать псевдокласс target в 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>

К сожалению, целевой псевдокласс не поддерживается IE или Opera, поэтому, если вы ищете здесь универсальное решение, этого может быть недостаточно.

2 голосов
/ 10 сентября 2008

Используйте ваш любимый инструментарий JS, чтобы добавить класс «highlight» (или любой другой) к элементу, содержащему (или содержащемуся) в привязке.

Что-то вроде: 

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

Конечно, вам нужно было бы позвонить по нему или нажать, если вы хотите, чтобы он вызывался другими ссылками на странице, и вы захотите определить класс .highlight. Вы также можете сделать так, чтобы ваш селектор jQuery перемещался вверх или вниз в зависимости от контейнера, который вы хотите выделить.

0 голосов
/ 10 сентября 2008

Полагаю, если бы вы могли хранить эту информацию с помощью JavaScript и файлов cookie для функции запоминания закладок и даже добавить всплеск Ajax, если вы хотите взаимодействовать с базой данных.

CSS сможет выполнять только стилизацию. Вам нужно будет дать привязанному якору класс, найденный в вашем файле CSS.

CSS также имеет селектор a: visit, который используется для стилизации ссылок, найденных в истории браузера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...