проблемы с якорными и хэш-значениями - PullRequest
Новая
       25

проблемы с якорными и хэш-значениями

0 голосов
/ 15 февраля 2011

У меня есть следующий код: 

<ul class="questions">
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
</ul>


<div id="test1">test1 text</div>
<div id="test2">test2 text</div>
<div id="test3">test3 text</div>

Я использую этот скрипт, чтобы выделить нужный идентификатор привязки на той же странице: 

<script type="text/javascript">

$(document).ready(function() {

    $(function() 
    {
        $('a').click(function(event) {

           $(location.hash).css("background-color","red");


        });
    });

});
</script>

движение якоря работает, но выделение длявыбранный идентификатор не работает, если я не обновляю страницу после загрузки страницы с первого раза, а также текущее выделение не рассеивается при нажатии на другую ссылку

Ответы [ 5 ]

6 голосов
/ 15 февраля 2011 
$(function() {});

- это сокращение для 

$(document).ready(function(){})

, поэтому, как сказал Александр, вам не нужны оба.

Если выделение не работает, вы можете попробовать: 

$(function() {
    $('a').click(function(event) {
       $($(this).attr("href")).css("background-color","red");
    });
});

, поскольку вы не можете полагаться на местоположение, которое изменяется после события щелчка.Существуют плагины jQuery, которые позволяют добавлять события в «изменение хеша», что может быть решением для вас, если вы часто его используете.

edit: Это нормально, что текущее выделение не исчезает при нажатии другойссылка. 

$(function() {
    $(location.hash).addClass("red");
    $('a').click(function(event) {
       $(".red").removeClass("red")
       $($(this).attr("href")).addClass("red");
    });
});

.red { background: red; }
2 голосов
/ 15 февраля 2011

Проблема заключается в том, что href привязки применяется после обработки события onclick привязки.Следовательно, во время события click обработка хэша местоположения еще не изменилась .

Вместо этого вы можете положиться на атрибут href для изменения цвета:

Например: 

<script type="text/javascript">
                    $(function() 
                    {
                            $('a').click(function(event) {
                                var divID = $(this).attr("href");
                                $(divID).css("background-color","red");
                            });
                    });
    </script>
1 голос
/ 15 февраля 2011

Изменение: 

<script type="text/javascript">

$(document).ready(function() {

    $(function() 
    {
        $('a').click(function(event) {

           $(location.hash).css("background-color","red");


        });
    });

});
</script>

Кому: 

<script type="text/javascript">


        $(function() 
        {
            $('a').click(function(event) {

               $(location.hash).css("background-color","red");


            });
        });

    </script>


// This is a shortcut...
$(function() {});

 // for this...
$(document).ready(function(){});
0 голосов
/ 15 февраля 2011

это последний код, который работает во всем мире, спасибо всем за быстрый ответ Я ценю это:) 

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"

LANG = "EN"> 

<script src="jquery.js"></script>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">

.red { background: red; }

</style>
</head>
<body>
<ul id="con">
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
</ul>

<div id="test1">test1 text</div>
<div id="test2">test2 text</div>

<span id="test3" >
<div>
dvdvdvdvdvdvdvdvdvdv
</div> 
</span>



<script type="text/javascript">

$(document).ready(function() {});
{
$('#con a[href*=#]').click(
function(){var elemId='#'+$(this).attr('href').split('#')[1];highlight(elemId);});

function highlight(elemId)
{
$(".red").removeClass("red")
$(elemId).addClass("red");

}
if(document.location.hash){highlight(document.location.hash);}
}

</script>
</body>
</html>
0 голосов
/ 15 февраля 2011

Существует ряд проблем с вашим скриптом: 

<script type="text/javascript">
$(document).ready(function() {
  $(function() 
  {
    $('a').click(function(event) {
      $(location.hash).css("background-color","red");
    });
  });
});
</script>

Начну сверху:

Убедитесь, что ваш сценарий заключен в теги CDATA, чтобы избежать проблем с кодировкой XML: 

<script type="text/javascript">
/* <![CDATA[ */
...code...
/* ]]> */
</script>

$(document).ready(...); совпадает с $(function(){});, что отметили многие другие. Большинство людей не могут понять, что он предназначен для псевдонима jQuery - $ (или любого другого имени, которое вы предпочитаете) для предотвращения конфликтов пространства имен: 

jQuery(function($){
  ...code...
});

Когда сработало событие document.ready, нет экземпляра, в котором вы указали бы, что текущее значение хеш-функции должно быть выделено: 

$(hash).css('background-color', 'red');

Хорошо, поэтому я использую переменную с именем hash, потому что нет никакой гарантии, что хэш установлен или будет начинаться со знака '#' (я смотрю на вас, IE). 

function normalizeHash()
{
  var hash = location.hash;
  if (hash.length)
  {
    if (hash[0] != '#')
    {
      hash = '#' + hash;
    }
  }
  else
  {
    hash = '';
  }
  return hash;
}

поскольку вы хотите отключить цвета при установке другого хэша, вы должны использовать классы

CSS: 

.activeHash
{
  background-color: red;
}

JS: 

$(hash).addClass('activeHash');

Вам нужно помнить, чтобы удалять классы из элементов во время функции click: 

$('.activeHash').removeClass('activeHash');
$(hash).addClass('activeHash');

@ Cybernate обнаружил проблему, которую я пропустил: хэш не изменился до после события click, простое решение - получить href элемента привязки, хотя это предполагает, что href не записан с путем (обходной путь должен также прослушивать событие hashchange): 

hash = $(this).attr('href');

Итак, чтобы сложить все вместе: 

<script type="text/javascript">
/* <![CDATA[ */

function normalizeHash()
{
  var hash = location.hash;
  if (hash.length)
  {
    if (hash[0] != '#')
    {
      hash = '#' + hash;
    }
  }
  else
  {
    hash = '';
  }
  return hash;
}

jQuery(function($){
  var hash = normalizeHash();

  $(hash).addClass('activeHash');

  $('a').click( function(e){
    hash = $(this).attr('href');
    $('.activeHash').removeClass('activeHash');
    $(hash).addClass('activeHash');
  } );
});

/* ]]> */
</script>

Отказ от ответственности: я не тестировал ни один из этих кодов, дайте мне знать, если я сделал ошибку орфографии.

...