Jump to content
lerand

Помогите с CSS (выделить активную категорию)

Recommended Posts

Posted (edited)

Добрый день! 

 

Чайник. Помогите с CSS. Нужно прописать стиль, чтобы при нахождении в категории Активная ссылка меню (Категории) в сайдбаре отличалась цветом от всех иных. Технический сайт: http://gtsspb.bget.ru/preobrazovateli-i-udaliteli-rzhavchiny/

 

Шаблон UniShop.

 

Убил час в гугле и толку ноль.

 

Заранее благодарен за подсказку

Edited by lerand

Share this post


Link to post
Share on other sites

Одного css тут мало, нужно сначала элементам класс присвоить, чтобы активный отличался от остальных.

Добавьте JS:

<script type="text/javascript">
jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#menu a"),function(){
if(this.href==url){$(this).addClass('active');};
});
})(jQuery);
</script>

А затем уже в css добавьте:

.active {
	color: #3399ff;
}

 

  • +1 1

Share this post


Link to post
Share on other sites
2 минуты назад, sammygr сказал:

Одного css тут мало, нужно сначала элементам класс присвоить, чтобы активный отличался от остальных.

Добавьте JS:

<script type="text/javascript">
jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#menu a"),function(){
if(this.href==url){$(this).addClass('active');};
});
})(jQuery);
</script>

А затем уже в css добавьте:

.active {
	color: #3399ff;
}

 

 Спасибо большое!!!!!! Еще вопрос. Добавить JS? Это куда/как лучше?

Share this post


Link to post
Share on other sites
38 минут назад, lerand сказал:

 Спасибо большое!!!!!! Еще вопрос. Добавить JS? Это куда/как лучше?

 

в настройках юнишоп Свои стили и скрипты

  • +1 1

Share this post


Link to post
Share on other sites
5 минут назад, Vetroff сказал:

 

в настройках юнишоп Свои стили и скрипты


Точно! Спасибо!

Share this post


Link to post
Share on other sites
12 минут назад, Vetroff сказал:

 

в настройках юнишоп Свои стили и скрипты

 

Удивительно, но не сработало :(

Share this post


Link to post
Share on other sites
16 минут назад, lerand сказал:

 

Удивительно, но не сработало :(

 

вставляйте только код, без

<script type="text/javascript">

</script>

  • +1 1

Share this post


Link to post
Share on other sites

Так и сделал

Только что, Vetroff сказал:

 

вставляйте только код, без

<script type="text/javascript">

</script>

 

И так делал. Не работает.

Share this post


Link to post
Share on other sites
6 минут назад, lerand сказал:

Так и сделал

 

И так делал. Не работает.

 

а если так

$(document).ready(function() {
var url=document.location.href;
 $.each($("#menu a"),function(){
  if(this.href==url){$(this).addClass('active');};
 });
});

 

  • +1 1

Share this post


Link to post
Share on other sites

ну и возможно, стили перекрываются, можно попробовать 

.active {
    color: #3399ff !important;
}

 

  • +1 1

Share this post


Link to post
Share on other sites
15 минут назад, lerand сказал:

 

Удивительно, но не сработало :(

если ты сделал ту чушь которая написана там вверху, то воткни рядом с кнопкой стиль и он изменится, вот тебе код для вставки прямо в код html , лучше так ставить а не собирать кучу мусора, гугл и так ругается на большие размеры стилей в опенкарте .

<style type="text/css">
.active {
	color: #3399ff;
} </style>

 

 

P.S. ты скорее всего сделал не правильно, ибо у тебя элемент актив это текст букв и стиль у тебя работает, он делает буквы синими.

Share this post


Link to post
Share on other sites

@sanya94 там вверху написана не чушь.

Решение топорное, но рабочее. Текущий модуль не знает, какая категория активна и поэтому классов к ней не цепляет.

Это можно сделать и в контроллере, но судя по тому, что человек слабо ориентируется, ему проще будет в скрипты сунуть определяшку, чем объяснять, как и какой контроллер редактировать. С шаблоном в догонку.

  • +1 1

Share this post


Link to post
Share on other sites
9 минут назад, Vetroff сказал:

ну и возможно, стили перекрываются, можно попробовать 

.active {
    color: #3399ff !important;
}

 

 

Огромное Вам спасибо! Ваш стиль с криптонит сработал!

 

 

Еще раз ОГРОМНОЕ СПАСИБО!

Share this post


Link to post
Share on other sites
1 минуту назад, LiLu сказал:

@sanya94 там вверху написана не чушь.

Решение топорное, но рабочее. Текущий модуль не знает, какая категория активна и поэтому классов к ней не цепляет.

Это можно сделать и в контроллере, но судя по тому, что человек слабо ориентируется, ему проще будет в скрипты сунуть определяшку, чем объяснять, как и какой контроллер редактировать. С шаблоном в догонку.

я просто нуб, не знаю, я даже не понимаю о чем он, а иногда слова забываю.

Если речь о хлебных крошках Breadcams (ну или как то так), то ссылка на самого себя не должна работать , так говорит гугл, должны работать только прошлые, в стандартном шаблоне есть этот баг и существует фикс бага, эта строчка нужна для перехода назад .

Теоритически (если я понял о чем речь правильно), то при создании подкатегории, или добавления товара в категорию, можно будет зайти в подкатегорию или товар, и уже оттуда прошлая ссылка станет доступной, а пока что у него сайт\категория , сайт\товар 

Share this post


Link to post
Share on other sites
7 минут назад, lerand сказал:

 

Огромное Вам спасибо! Ваш стиль с криптонит сработал!

 

 

Еще раз ОГРОМНОЕ СПАСИБО!

в хлебных крошках нельзя ставить ссылку активную на страницу, где ты находишся, гугл сказал так

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.