2014-01-31 1 views
0

Я, имеющие различные Div на моем сайте, и я хотел бы сделать следующеенажав одну гиперссылку, чтобы изменить стили CSS более чем один различных дивы

  • когда я нажав одну ссылку, которая будет приводить к изменению внутри кода css более чем одного div. Например, если я нажимаю на клиенте, я хотел бы сделать элемент ul с классом = "rslides", чтобы получить свойство heigh = "0px", а другой div-слой будет расширяться ниже этого.

Но у меня есть 2 проблемы:

  1. первым в том, что я использую адаптивный ползунок, который я, чтобы сделать его высота = «0px», я должен изменить свойство класса.
  2. Другая проблема заключается в том, как сделать одну ссылку триггером 2 действия для второго div. Я попытался с триггерами, но она ограничивается одним элементом в "ID"

DOM Структура:

<div id="slider"> 
     <div id="index_slider"> 
     <ul class="rslides" > 
      <li><img src="img/index_design_02.jpg"></li> 
       <li><img src="img/index_design_03.jpg"></li>     
     </ul> 
     </div> 
    </div> 

JS код:

<script src="js/responsiveslides.min.js"></script> 
<script> 
    $(function() { 
    $(".rslides").responsiveSlides({ 
    speed: 1000, 
    maxwidth: 1200 
     }); 
    }); 
</script> 



<div id="menu"><a href="#rslides">clients</a></div> 
<div id="second_slider"></div> 

CSS КОД ФОТ оба цилиндра ползунка:

.rslides { 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    -webkit-transition:all 1s ease-in-out; 

} 

.rslides:target { 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    height:0px; 


} 

Вот ссылка на JSfiddle

где моя цель когда-то нажал на ссылку ДИВ называется «меню», чтобы пойти на вершине с раздвижными перехода и другой Div называемый «second_slider», чтобы развернуть на дне , и ползунок исчезнет.

+0

Дайте jsFiddle –

+0

добавить класс к любому элементу, что вы могли бы сделать, это использовать этот '.addClass () . были '' - это класс css, который установил бы 'height: 0'. – dreamweiver

+0

второе требование, я не получил его * Другая проблема заключается в том, как сделать одну ссылку триггер 2 действия или второй div. * Что вы подразумеваете под этим? – dreamweiver

ответ

0

В зависимости от вашей разметки вы можете настроить таргетинг более чем на один div. Единственное ограничение - каждая цель должна быть дочерью вашей целевой ссылки.

<div class="rslides"> 
    <div id="target-a"> 
    <div class="sub-target-one"></div> 
    <div class="sub-target-two"></div> 
    </div> 
</div> 

, как вы бы об этом, как это:

.rslides:target > .sub-target-one, 
.rsiides:target > .sub-target-two { 
    /* rules go here */ 
} 
+0

Это будет работать на зависании, как это будет на ссылку нажмите? и здесь цель-одна и цель-два будут иметь одинаковые свойства, как мы можем сделать это, чтобы они имели разные стили CSS? –

+0

Я не следую, я понимаю, что псевдокласс класса «: target» будет работать, когда вы назначаете цель ссылке, например, http: //mylink.net#target. Вы можете использовать ': active' для кликов, но они ограничены, когда вы на самом деле нажимаете кнопку. – beautifulcoder

Смежные вопросы