Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2018, 20:16
Интересующийся
Отправить личное сообщение для CORONER Посмотреть профиль Найти все сообщения от CORONER
 
Регистрация: 27.02.2018
Сообщений: 13

Баг с табами?
На сайте установлены табы и внутри них ещё одни.
Не работают табы #four-#seven во вкладке Gallery.
Точнее работают, но неверно, первые 3 кладки нормально переключаются, как только переключаемся на 4-ую появляется 1-ая, а поверх нее 4-ая.
Как это исправить, не пойму(

<div class="back">
           
         <div id="seven" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
     <a href="#four">LANDSCAPE</a>
       <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
     <b>  <a href="#seven">REAL STATE</a></b>
           
    <p class="abs">
 <span>7</span>
    </p>
  </div>   
         
         
                   <div id="six" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
     <a href="#four">LANDSCAPE</a>
       <a href="#five">ANIMAL</a>
       <b> <a href="#six">MACRO</a></b>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>6</span>
    </p>
  </div>     
         
              <div id="five" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
     <a href="#four">LANDSCAPE</a>
       <b>  <a href="#five">ANIMAL</a></b>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>5</span>
    </p>
  </div>    
         
       <div id="four" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>4</span>
    </p>
  </div>     
         
         
   <div id="tree" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <b>  <a href="#tree">PEOPLE</a></b>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>3</span>
    </p>
  </div>
  

  <div id="two" class="abs block">
<a href="#one">NEW</a>
  <b>  <a href="#two">CITY</a></b>
    <a href="#tree">PEOPLE</a>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    
    <p class="abs">
  <span>
               
      2
      
        </span>
    </p>
  </div>

  <div id="one" class="abs block">
    <b><a href="#one">NEW</a></b>
    <a href="#two">CITY</a>
    <a href="#tree">PEOPLE</a>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
    <span>
 2
        </span>
    </p>
  </div>


Код:
.back {
    width: 100%;
    height: 409px;
    background:none;
}
.abs {
    position: absolute;
    margin-top: 3%;
    width: 97%;
    height: 81%;
    margin-left: 0%;
}
.abs>p>span {margin-top:20%;position: absolute;}
.abs>a {padding: 2%;background: #333;color: white;float:left; margin-top: -3%;text-decoration: none;}
.abs>b>a {
    padding: 2%;
    background: url(img/bglinka.gif);
    background-repeat: repeat;
    color: white;
    float: left;
    text-decoration: none;
    margin-top: -3%;
    font-weight: normal;
}
.block {
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    position: absolute;
    display: none;
}
.tabs {
  background: #ededed;
  font-family: monostace;
  top: 58px;
  width: 520px;
  height: 270px;
}

.tabs p {
  top: 16px;
  font-family: monostace;
}

#one {
  display: block;
}

div:target {
  display: block;
}
div[id*=tab]:target {
  display: block;
}
div[id*=tab]:target ~ #tab {
  display: block;
}
div[id*=t]:target ~ #one {
  display: none;
}
http://demoldphoto.ucoz.net/
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2018, 23:45
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 393

<div class="bar">
	<a href="#one">NEW</a>
	<a href="#two">CITY</a>
	<a href="#three">PEOPLE</a>
	<a href="#four">LANDSCAPE</a>
	<a href="#five">ANIMAL</a>
	<a href="#six">MACRO</a>
	<a href="#seven">REAL STATE</a>
</div>
<div class="tabs">
	<div id="two">2</div>
	<div id="three">3</div>
	<div id="four">4</div>
	<div id="five">5</div>
	<div id="six">6</div>
	<div id="seven">7</div>
	<div id="one">1</div>
</div>
<style>

	.tabs > [id],
	.tabs > [id]:target ~ [id] {
		display: none;
	}

	.tabs > [id]:target,
	.tabs > [id]:last-child {
		display: block;
	}

</style>


Всё-таки работающий пример реализации вкладок при помощи псевдо-класса :target
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2018, 18:12
Интересующийся
Отправить личное сообщение для CORONER Посмотреть профиль Найти все сообщения от CORONER
 
Регистрация: 27.02.2018
Сообщений: 13

Спасибо)
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2018, 13:24
Интересующийся
Отправить личное сообщение для CORONER Посмотреть профиль Найти все сообщения от CORONER
 
Регистрация: 27.02.2018
Сообщений: 13

Не могу теперь сделать активную ссылку
Ранее делал через <b>, теперь через псевдоклассы не выходит.
Точнее выходит, но пока есть нажатие на ссылку. А нужно, чтобы оставалось, пока не нажмешь на другой элемент секции bar
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Баг (если водить курсором по картинках то они отступают в разные стороны) злобная_пипа jQuery 4 06.11.2015 16:50
Нужна помощь с доработкой JS, исправить 1 баг, можно даже за $ Kanzaki Элементы интерфейса 18 14.09.2011 21:21
Очередной баг jQuery? monolithed jQuery 8 27.01.2011 10:16
Забавный баг (фича?) в Chrome / Safari Cr@ZyBoY Opera, Safari и др. 11 22.02.2010 17:26
Баг с jpeg в ie6 JsLoveR Элементы интерфейса 20 28.01.2010 20:57