Изменение location.hash без прокрутки страницы
Маленький хак-иш, но он работает. Обратите внимание, что тег label можно разместить где угодно. Ключевыми частями являются:
- css
input:checked+divвыбирает div сразу же после / после входа - Метка
forуказала флажок (или эй, метка и просто установите флажок) -
display:noneскрывает материал
Код:
<head>
<style>
#sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
#content {height:100%; background:green; width:400px; clear:none; float:left;}
label {background:yellow;float:left;}
input{display:none;}
input:checked+#sidebar{display:none;}
</style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>
<div id="content">hello</div>
</div>
</body>
EDIT: Извините, возможно, прочитал вопрос лучше.
Можно также использовать элементы css3 для создания эффекта слайда / затухания. Я недостаточно знаком с ними, чтобы помочь вам в этом, но они существуют. Тем не менее, поддержка браузера.
Вы могли бы объединить вышеупомянутый эффект с javascript, чтобы использовать причудливые переходы и все еще иметь откат. jquery имеет метод css для переопределения вышеперечисленных и slide и fade для переходов.
- Тильда (~) означает некоторый родной брат после; (+ g).
-
[key="value"]- селектор атрибутов. вкладки вместе можно использовать:<html> <head> <style> input[value="1"]:checked ~ div[id="1"]{ display:none; } input[value="2"]:checked ~ div[id="2"]{ display:none; } </style> </head> <body> <input type="radio" name="hider" value="1"> <input type="radio" name="hider" value="2"> <div id="1">div 1</div> <div id="2">div 2</div> </body> </html>
4 ответа
Думаю, я нашел довольно простое решение. Проблема в том, что хеш в URL-адресе также является элементом страницы, на которую вы попадаете. если я просто добавлю некоторый текст к хешу, он больше не будет ссылаться на существующий элемент!
$(function(){
//This emulates a click on the correct button on page load
if(document.location.hash){
$("#buttons li a").removeClass('selected');
s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:","");
eval(s);
}
//Click a button to change the hash
$("#buttons li a").click(function(){
$("#buttons li a").removeClass('selected');
$(this).addClass('selected');
document.location.hash="btn_"+$(this).attr("id")
//return false;
});
});
Теперь URL-адрес отображается как page.aspx # btn_elementID , который не является настоящим идентификатором на странице. Я просто удаляю "btn_" и получаю фактический идентификатор элемента
Шаг 1: Вам необходимо отключить идентификатор узла, пока не будет установлен хэш. Это делается путем удаления идентификатора с узла во время установки хэша и последующего его добавления.
hash = hash.replace( /^#/, '' );
var node = $( '#' + hash );
if ( node.length ) {
node.attr( 'id', '' );
}
document.location.hash = hash;
if ( node.length ) {
node.attr( 'id', hash );
}
Шаг 2: Некоторые браузеры запускают прокрутку в зависимости от того, где узел с идентификатором был в последний раз виден, поэтому вам нужно чтобы им немного помочь. Вам нужно добавить дополнительный div в верхнюю часть области просмотра, установить его идентификатор на хэш, а затем откатить все назад:
hash = hash.replace( /^#/, '' );
var fx, node = $( '#' + hash );
if ( node.length ) {
node.attr( 'id', '' );
fx = $( '<div></div>' )
.css({
position:'absolute',
visibility:'hidden',
top: $(document).scrollTop() + 'px'
})
.attr( 'id', hash )
.appendTo( document.body );
}
document.location.hash = hash;
if ( node.length ) {
fx.remove();
node.attr( 'id', hash );
}
Шаг 3. Оберните его в плагин и используйте его вместо записи на location.hash ...
Я не думаю, что это возможно. Насколько мне известно, единственный случай, когда браузер не прокручивает до измененного document.location.hash , - это если хэш не существует на странице.
Эта статья не не имеет прямого отношения к вашему вопросу, но в нем обсуждается типичное поведение браузера при изменении document.location.hash
Фрагмент исходного кода:
$("#buttons li a").click(function(){
$("#buttons li a").removeClass('selected');
$(this).addClass('selected');
document.location.hash=$(this).attr("id")
});
Измените это на:
$("#buttons li a").click(function(e){
// need to pass in "e", which is the actual click event
e.preventDefault();
// the preventDefault() function ... prevents the default action.
$("#buttons li a").removeClass('selected');
$(this).addClass('selected');
document.location.hash=$(this).attr("id")
});