2017-01-25 9 views
-2

私はいくつかの要素を持つブロックを持っています。このブロックにいくつかのクラスを追加すると、その要素は新しいスタイルを取得します。だから、あなたは私の "infoBlock"にクラスを追加するjQueryのコードを教えてくれますか?必要性が、IHAVE ボタンをクリックするとクラスを追加します

li { 
 
    list-style-type: none; 
 
    } 
 

 
.infoBlock { 
 
\t display: block; 
 
\t width: 520px; 
 
\t height: 280px; 
 
\t background: #fff; 
 
\t margin: 50px 0 0 225px; 
 
\t position: relative; 
 

 
} 
 

 
.infoBlock .more { 
 
\t width: 180px; 
 
\t height: 40px; 
 
\t display: inline-block; 
 
\t background: #5795f9; 
 
\t text-decoration: none; 
 
\t font: bold 16px Helvetica; 
 
\t text-transform: uppercase; 
 
\t padding: 10px ; 
 
\t text-align: center; 
 
\t margin: 20px 0 0 0; 
 
color: #fff; 
 
} 
 

 
.infoBlock .person{ 
 
\t display: inline-block; 
 
\t width: 25%; 
 
} 
 

 
.infoBlock .person img { 
 
\t width: 80%; 
 
\t margin: 20px 0 0 20px; 
 
} 
 

 
.infoBlock .person ul { 
 
\t margin: 20px 0 0 20px; 
 
} 
 

 
.infoBlock .person .risk { 
 
\t text-transform: uppercase; 
 
\t color: #a6a6a6; 
 
\t font: bold 15px Helvetica; 
 
} 
 

 
.infoBlock .person .level { 
 
\t margin: 10px 0 0 ; 
 
\t color: #ff8080; 
 
\t font: bold 14px Helvetica; 
 
} 
 

 
.infoBlock .personDescription { 
 
\t display: inline-block; 
 
\t width: 74%; 
 
\t position: absolute; 
 
\t margin: 20px 0 0 20px; 
 
} 
 

 
.infoBlock .personDescription .name{ 
 
\t font:bold 20px Helvetica; 
 
\t color: #a6a6a6; 
 
\t margin: 0 0 20px; 
 
} 
 
.infoBlock .personDescription .position { 
 
\t font: bold 15px Helvetica; 
 
\t color: #5795f9; 
 
\t margin: 0 0 25px; 
 
} 
 

 
.infoBlock .personDescription .description { 
 
\t font: bold 14px Helvetica; 
 
\t color: #a6a6a6; 
 
} 
 
.infoBlock .personDescription .description span { 
 
\t color: #5795f9; 
 
} 
 
.infoBlock .personDescription .description .black { 
 
\t color: #000; 
 
} 
 

 
.infoBlock .fullInfo { 
 
\t display: none; 
 
} 
 
/* //////////////////////////// */ 
 

 
.infoBlock.f { 
 
\t height: 480px; 
 
} 
 

 
.infoBlock.f .fullInfo { 
 
\t display: block; 
 
} 
 

 
.infoBlock.f .person ul{ 
 
\t position: absolute; 
 
\t margin: -115px 0 0 450px; 
 

 
} 
 

 
.infoBlock.f .personDescription .description { 
 
\t display: none; 
 
} 
 

 
.infoBlock.f .border { 
 
\t width: 80%; 
 
\t height: 1px; 
 
\t background-color: #a4a4a4; 
 
\t margin: 10px 0 0 20px; 
 
\t position: absolute; 
 
} 
 

 
.infoBlock.f .personDescription .more{ 
 
\t display: none; 
 
} 
 

 
.infoBlock.f .fullInfo { 
 
\t position: absolute; 
 
\t margin: 25px 0 0 25px; 
 
} 
 

 
.infoBlock.f .fullInfo .infoMenu li:hover { 
 
\t color: #5795f9; 
 
} 
 

 
.infoBlock.f .fullInfo .infoMenu li{ 
 
\t display: inline; 
 
\t margin:0 30px 0 0; 
 
\t color: #a6a6a6; 
 
\t font: bold 14px Helvetica; 
 
\t cursor: pointer; 
 
} 
 

 
.infoBlock.f .fullInfo .scheme .schemeNumber { 
 
\t margin: 20px 0 8px 30px; 
 
\t font: bold 15px Arial; 
 
\t color: #000; 
 
} 
 

 

 

 
.infoBlock.f .fullInfo .scheme .chance { 
 
\t margin:0 0 10px 30px; 
 
\t font: 16px Arial; 
 
\t font-weight: 200; 
 
\t color: #000; 
 
} 
 
.infoBlock.f .fullInfo .scheme table { 
 
\t margin: 0 0 10px 28px; 
 
} 
 

 
.infoBlock.f .fullInfo .scheme table p { 
 
\t font: bold 15px Helvetica; 
 
} 
 
.infoBlock.f .fullInfo .scheme table .type { 
 
\t color: #a5a5a5; 
 
\t font: 15px Helvetica; 
 
} 
 

 
.infoBlock.f .fullInfo .scheme .problem { 
 
\t font: 16px Arial; 
 
\t color: #a5a5a5; 
 
\t margin: 0 0 20px 30px; 
 
} 
 

 
.infoBlock.f .fullInfo .scheme .more { 
 
\t margin: 0 0 0 30px; 
 
}
<div class = "infoBlock"> 
 

 
     <div class = "person"> 
 
     <img src="img/1.jpg" alt = ""> 
 
     <ul> 
 
      <li><p class = "risk">авыаыа:</p></li> 
 
      <li><p class = "level">Висоцуацуацуааукий</p></li> 
 
      <li></li> 
 

 
     </ul> 
 
     </div> 
 

 
     <div class = "personDescription"> 
 
     <h2 class = "name">Василенко<br> Василь Антипович</h2> 
 

 
     <h4 class = "position">Авыпукпуфппук</h4> 
 

 
     <p class = "description">АВаываывавыпкупк <span>2х схем<br></span> на сумму більш ніж <span class = "black">3 млн. грн<span></p> 
 
     <a href="#" class = "more" >докладніше</a> 
 

 
     </div> 
 

 

 
     <div class = "fullInfo"> 
 
     <ul class = "infoMenu"> 
 
      <li>Схеми</li> 
 
      <li>Зв'язки</li> 
 
      <li>Додаткова інформація</li> 
 
     </ul> 
 

 
     <div class = "scheme"> 
 
      <h3 class = "schemeNumber">Схема №1.1</h3> 
 
      <p class = "chance">Вірогідність - 93%</p> 
 
      <table> 
 
      <tr> 
 
       <td><p>Тип:</p></td> 
 
       <td><p class = "type">авыавыавыавыа</p></td> 
 
      </tr> 
 

 
      </table> 
 

 
      <p class = "problem">Квартира площею 123 кв. м записана<br> на Василенко М.В. (теща)</p> 
 

 
      <a href="#" class = "more f" >докладніше</a> 
 
     </div> 
 

 
     </div> 
 

 

 
    </div>

+5

です。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします(http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

答えて

0
あなたはsimiply次のコードスニペットでこれを行うことができ

$('.more').on('click', function() { 
    $('.infoBlock').addClass('class'); 
}); 

する'class'が保有目的のクラス名になります新しい特性。ここで

は、あなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されている作業Fiddle.

+0

このクラスを削除するには、ありがとう、私はこのfuntionを使用する必要があります: $( "。more")on( "click"、function(){ if($(this).parents( "。infoBlock" ( "f"); } }).hasClass( "f")){ $(this).parents( "。infoBlock")。 –

関連する問題