0

Здравствуйте. Вот дизайн: введите сюда описание изображения

Это партнеры, по нажатию на иконку, внизу появляется описание выбранной партнера, текст. Мне нужно чтобы по дефолту был выбран первый партнер, а также, чтобы при переключении, менялся цвет текст на партнере и внизу менялась картинка. Я сделал переключение текста, но как сделать цвет текста и по дефолту чтобы был открыт первый партнер, не знаю, подскажите. Вид:

<?php if ( have_posts() ) :  query_posts('cat=5'); while (have_posts()) : the_post(); ?>
        <?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), full ); ?>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="wr_part part" style="background: url(<?php echo $thumbnail[0];?>)">
                <p class="ttl"><? the_title()?></p>
                <div class="partwr"><? the_content()?></div>
            </div>
        </div>

    <? endwhile; endif; wp_reset_query(); ?>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="ttlp"><? the_content()?></div>
        </div>
    </div>

jquery:

$(".part").click(function() {
    var color = $(this).children('.ttl');

    var value = $(this).children('.partwr').html();
    var posledniy = $(".ttlp p").last(); //последний элемент
    if($(".ttlp p").last()){
        var spisok = $(".ttlp").append(value);
        posledniy.addClass('deactivated');

    }
});

css:

.partwr, .deactivated{
display: none;
   }
5
  • возможно я замудрил сильно, может можно как-то проще все сделать... Commented 11 дек. 2017 в 11:49
  • для бутстрапа есть уже готовые табы, можно взять их codepen.io/wizly/pen/BlKxo
    – Павел
    Commented 11 дек. 2017 в 11:54
  • @Павел, я знаю, но мне нужны такие. Commented 11 дек. 2017 в 11:56
  • 2
    @artem55555p возьмите дефолтный таб из бутстрап и поменяйте стили, тогда не нужно будет велосипед ковать
    – DogeDev
    Commented 11 дек. 2017 в 11:59
  • @DogeDev нужно именно такие Commented 11 дек. 2017 в 12:19

1 ответ 1

0

Я решил так:

$(function() {
  var part = $(".part"),
    out = $(".ttlp");
  part.on("click", function() {
    var el = $(this).toggleClass("act");
    part.not(el).removeClass("act");
    var bg = el.attr("style");
    if (el.is(".act")) {
      out.html($(".partwr", el).html()).removeClass("deactivated").attr("style", bg);
    } else {
      out.addClass("deactivated");
    }
  }).eq(0).click();
});
.act .ttl {
  color: #FF0000;
}

.partwr,
.deactivated {
  display: none;
}

.part,
.ttlp {
  width: 200px;
  height: 80px;
  background-size: cover;
  float: left;
  margin-left: 10px;
}

.ttlp {
  float: none;
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div class="wr_part part" style="background: url(https://ds04.infourok.ru/uploads/ex/1274/00028373-8ce7411f/hello_html_4c0f7715.jpg)">
      <p class="ttl">the_title1</p>
      <div class="partwr">the_content1</div>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div class="wr_part part" style="background: url(https://desktopmania.ru/pics/00/71/21/DesktopMania.ru-71215-300x168.jpg)">
      <p class="ttl">the_title2</p>
      <div class="partwr">the_content2</div>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div class="wr_part part" style="background: url(http://astromera.ru/wp-content/uploads/2016/02/chistaya-voda-1-450x225.jpg)">
      <p class="ttl">the_title3</p>
      <div class="partwr">the_content3</div>
    </div>
  </div><br>
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="ttlp"></div>
  </div>



</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.