单击按钮时添加一个类

时间:2017-01-25 16:24:18

标签: javascript jquery html css

我有一个有一些元素的块。如果我在这个块中添加一些类,那么我确实会获得新的样式。那么,你能帮我解决jQuery中的代码,它为我的“infoBlock”添加了一个类。

我有一个但需要

li {
  list-style-type: none;
  }

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

}

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

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

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

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

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

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

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

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

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

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

.infoBlock.f {
	height: 480px;
}

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

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

}

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

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

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

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

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

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

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



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

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

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

.infoBlock.f .fullInfo .scheme .more {
	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>

1 个答案:

答案 0 :(得分:0)

您可以使用以下代码段轻松执行此操作:

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return self.shouldHideFooter ? nil : self.footerTitle;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return self.shouldHideFooter ? 0 : UITableViewAutomaticDimension;
}

其中$('.more').on('click', function() { $('.infoBlock').addClass('class'); }); 将是包含新属性的所需类名。

这是一个有效的 Fiddle.