Jump to content

Как выделить текущую ссылку страницы, где нахожусь в данный момент


Recommended Posts

Сделал горизонтальное меню из трех радио-кнопок, в каждой категории еще десяток ссылок, но если нажимаю, например, вторую вкладку и там выбираю ссылку на страницу, то после перехода вкладка скидывается на самую первую и не понятно, где нахожусь.

 

День бороздил просторы интернета, да так ничего рабочего и для новичка не нашел. Все указывает на то, что надо скрипт js.

 

Может в самой престашоп уже есть такая функция, которая выделяет ссылку текущей страницы?

 

Например я создал 10 страниц cms и их всех перелинковал между собой, то ссылка на странице в которой нахожусь выглядит как обычный текст без каких-либо динамических и визуальных эффектов

 

Вот html & css меню. Если кто знает решение и ему не трудно направить меня на путь истинный я буду весьма признателен

 

<div class="tabs">

  <div class="tab">
   <input type="radio" id="tab-1" name="tab-group-1" checked>
   <label for="tab-1"><strong>{l s='battery' mod='blocktopmenu'}</strong></label>

 <div class="content">
	   <p class="sod" ><a href="#">ACER</a>
</p>
   </div>
  </div>

  <div class="tab">
   <input type="radio" id="tab-2" name="tab-group-1">
   <label for="tab-2"><strong>{l s='kulera' mod='blocktopmenu'}</strong></label>

   <div class="content">
	   <p class="sod"><a href="#">ASUS</a> </p>


   </div>
  </div>

   <div class="tab">
   <input type="radio" id="tab-3" name="tab-group-1">
   <label for="tab-3"><strong>{l s='klaviatyri' mod='blocktopmenu'}</strong></label>

   <div class="content">
	   <p class="sod"><a href="#">DELL</a></p>


   </div>
  </div>

</div>

 

 

.tabs {
margin-top:-40px;
 position: relative;
 min-height: 70px;
 clear: both;
 margin: 25px 0;
}
.tab {
color:#333;
font:Arial, Helvetica, sans-serif;
font-size:15px;
 float: left;
}
.tab label {

 cursor: pointer;
 background: #eee;
 padding: 10px;
 border: 1px solid #B1AB94;
 margin-left: -1px;
 position: relative;
 left: 1px;
}
.tab [type=radio] {
 display: none;
}
.content {
width:980;
 position: absolute;
 top: 28px;
 left: 0;
 background: white;
 right: 0;
 bottom: 0;
 padding: 10px;
 border: 1px solid #B1AB94;
}
[type=radio]:checked ~ label {
 background: white;
 border-bottom: 1px solid white;
 z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
 z-index: 1;
}
.sod{ margin-top:3px;
font-size:12px;
text-decoration:none;
}

 

 

ссылка на сайт в подписи если не правильно изъяснялся

Link to comment
Share on other sites

×
×
  • Create New...