Ух ты, что сбивает с толку. Кажется, ты слишком усложняешь ситуацию.Вам не нужен CSS для конкретной страницы или что-то в этом роде. Вам просто нужно установить класс .current в другое время.
Когда кто-то переходит на ваш сайт, вы будете знать, какой тег #tag он загружает, или еслинет ни одного
Теперь, в основном, при загрузке страницы вам нужно посмотреть на хэштег, если он там есть и если он правильный (если это фактическая страница, которую вы учли), то вы просто загружаете эту страницу, как вы.сделать на данный момент, но также выделить лист.
Вы могли бы действительно упростить всю свою вещь на листе .current
На самом деле «лист» является только «текущим», когда вы загружаете информацию.Поэтому, когда информация загружается и помещается в вашу оболочку $, исчезает и анимируется;тогда поставьте свой .current.
Прокомментируйте, если вам нужно разъяснение или рабочий пример:)
Обновление - быстрое решение
http://jsfiddle.net/6p2f6/1/
По сути, я переместил материал, изменяющий .current, уходит в изменение хэша, и в нижней части я сделал это, чтобы проверить, перешел ли пользователь на страницу, используя хэш, если нет, то онустановить по умолчанию.Это не идеально, но это лучшее, что я могу сделать за то время, которое у меня есть на данный момент.Надеюсь, что это поможет!
Еще раз прокомментируйте, если вам нужно разъяснение или еще пример
Обновление - новый код:)
http://www.mediafire.com/?51vajskfeu923
Есть несколько файлов, так что я не могу забросить их в JSfiddle
Правильно, я не могу заставить работать все меню затухания, но я получилэто показывают / прячутся как обычные парения.Я могу взглянуть на это позже, но, поскольку вы знаете, как это сделать, я предполагаю, что вы можете понять это.Просто зайдите в файл javascript и найдите это:
$this = $(this);
var currentHash = window.location.hash;
console.log('specialMenu this.each(this) = '+$this.attr('href'));
//append all images
$this.append('<img class="defaultImage" src="'+settings.defaultImage+'"/>')
.append('<img class="hoverImage" src="'+settings.hoverImage+'"/>')
.append('<img class="activeImage" src="'+settings.activeImage+'"/>');
//prepare positioning
$('.defaultImage').css({
'z-index':'1'
});
$('.activeImage').css({
'z-index':'2'
});
$('.hoverImage').css({
'z-index':'3'
});
//Make parent correct height
$this.height($this.find('img').height());
//check what hash value is loaded
if(currentHash == $this.attr('href')){
$this.find('img:not(.activeImage)').hide();
$this.find('img.activeImage').show();
}else{
$this.find('img:not(.defaultImage)').hide();
$this.find('img.defaultImage').show();
}
$(this).hover(function(){
currentHash = window.location.hash;
$(this).find('img:not(.hoverImage)').hide();
$(this).find('img.hoverImage').show();
},function(){
currentHash = window.location.hash;
if(currentHash == $(this).attr('href')){
$(this).find('img:not(.activeImage)').hide();
$(this).find('img.activeImage').show();
}else{
$(this).find('img:not(.defaultImage)').hide();
$(this).find('img.defaultImage').show();
}
});
});
},
Теперь на главной странице, чтобы настроить его, посмотрите на этот код:
$('#contentContainer').jdAjaxContent({
'defaultPage': 'home',
'pathToLoadGif' : 'ajaxloading.gif'
});
$("#destroy").click(function(){
console.log('destroy.click');
$(this).jdAjaxContent('destroy');
});
//had to put this in its own window load, not sure why; weird bug
$(window).load(function(){
console.log('specialMenu.click');
$('a[href^=#]').jdAjaxContent('specialMenu',
{
'defaultImage': 'MenuIcons-01.png',
'hoverImage' : 'MenuIcons-02.png',
'activeImage' : 'MenuIcons-03.png'
});
});
Игнорируйте бит уничтожения, который простоизбавляется от плагина;уберите его.
Вас интересует
$('#contentContainer').jdAjaxContent({
'defaultPage': 'home',
'pathToLoadGif' : 'ajaxloading.gif'
});
$ ('# contentContainer') - это контейнер, который ваш ajax загружает в
страница по умолчанию - это страница по умолчанию, ha
pageToLoadGif - этопуть к маленькому загрузочному gif, который обычно отображается.
Теперь вам также нужно взглянуть на
$('a[href^=#]').jdAjaxContent('specialMenu',
{
'defaultImage': 'MenuIcons-01.png',
'hoverImage' : 'MenuIcons-02.png',
'activeImage' : 'MenuIcons-03.png'
});
Это бит, который делает вашу маленькую вещь в меню.Поскольку у вас есть разные изображения, вы должны будете делать каждое из них отдельно, что-то вроде этого:
$('a[href^=#]').each(function(){
$(this).jdAjaxContent('specialMenu',
{
'defaultImage': $(this).attr('defaultImage'),
'hoverImage' : '$(this).attr('hoverImage'),
'activeImage' : $(this).attr('activeImage')
});
});
Затем вы добавляете defaultImage = "blah", чтобы оно выглядело как
ТАКЖЕ
Выполните поиск и замену всех 'console.log' на '//console.log', чтобы все содержимое консоли не отображалось на вашем реальном веб-сайте.
Надеюсь, это поможетМне было очень интересно написать собственный движок ajax, если вы обнаружите какие-либо ошибки или вам нужна дополнительная помощь, просто прокомментируйте или напишите мне на mr.jackdavis@gmail.com