Question

我正在尝试获得选项卡式内容，其内容将根据所选选项卡的ID进行更改。

演练：

有两个item（两个标签）
我正在通过item运行for loop容器。因此，对于每个创建的新标签，都会生成一个新的item div。
在for loop中，我正在运行id="{{ loop.index }}" data-id="{{ loop.index }}"。因此它将遍历每个item并为其指定一个ID。即如果有一个item，则其ID为1，两个items，它们将是两个item div，其ID为1和2。
基于单击item的位置，我想选择其中的内容并在.text-container中显示它。

出于演示目的，我重复了item，因为我的原始代码是HUBL（HubSpot语言）。

jQuery('.tabbed__images.item').click(function() {
  jQuery('.tabbed__images .line').css('background-color', 'rgb(193,231,255)');
  jQuery(this).find('.line').css('background-color', 'rgb(58,124,166)');
  jQuery('.tabbed__images .text-container').html(jQuery(this).find('.description').html());
  jQuery('.tabbed__images .img-container').html(jQuery(this).find('.image').html());
});

.tabbed__images {
  height: 100%;
  padding: 0;
  border-radius: 15px;
}

.tabbed__images .container {
  background-color: #f0f3f4;
}

.tabbed__images .select-container .item {
  height: 3em;
  padding: 1em;
  display: block;
  text-align: center;
  cursor: pointer;
}

.tabbed__images .select-container .item .line {
  width: 100%;
  height: 0.4em;
  margin-top: 0.4em;
  background-color: #c1e7ff;
  -webkit-transition: background-color 0.25s;
  transition: background-color 0.25s;
  border-radius: 15px;
}

.tabbed__images .text-container {
  width: 100%;
  height: 6em;
  margin-top: 5em;
  padding: 1em;
  font-size: 1.75rem;
}

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<div class="hidden-xs container container-custom tabbed__images">
  <div class="container container__narrow">

    <div class="select-container">

      <!-- original HUBL -->
      <!--{% for item in module.tab_1 %} 
      <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}">
        <div class="text">{{ item.tab_header }}</div>
        <div class="line"></div>
        <div class="hidden description">{{ item.tabbed_text }}</div>
      </div>
      {% endfor %}-->

      <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}">
        <div class="text">Tab 1</div>
        <div class="line"></div>
        <div class="hidden description">Text of tab 1</div>
      </div>

      <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}">
        <div class="text">Tab 2</div>
        <div class="line"></div>
        <div class="hidden description">Text of tab 2</div>
      </div>

    </div>

    <!-- show content here -->
    <p class="text-container">This text here will be replaced</p>

  </div>
</div>

如何在单击标签时使隐藏的说明显示在text-container中？也就是说，如果我点击Tab 2，text-container将显示为Text of tab 2。

Answer 1

只需单击div即可更改段落的文本。使用函数siblings()

查找同级div的文本

 $('.text').click(function(){
    $('.text-container').html($(this).siblings(".hidden_description").html());
    })

jQuery('.tabbed__images.item').click(function() {
  jQuery('.tabbed__images .line').css('background-color', 'rgb(193,231,255)');
  jQuery(this).find('.line').css('background-color', 'rgb(58,124,166)');
  jQuery('.tabbed__images .text-container').html(jQuery(this).find('.description').html());
  jQuery('.tabbed__images .img-container').html(jQuery(this).find('.image').html());
});
$('.text').click(function(){
$('.text-container').html($(this).siblings(".hidden_description").html());
})

.tabbed__images {
  height: 100%;
  padding: 0;
  border-radius: 15px;
}

.tabbed__images .container {
  background-color: #f0f3f4;
}

.tabbed__images .select-container .item {
  height: 3em;
  padding: 1em;
  display: block;
  text-align: center;
  cursor: pointer;
}

.tabbed__images .select-container .item .line {
  width: 100%;
  height: 0.4em;
  margin-top: 0.4em;
  background-color: #c1e7ff;
  -webkit-transition: background-color 0.25s;
  transition: background-color 0.25s;
  border-radius: 15px;
}

.tabbed__images .text-container {
  width: 100%;
  height: 6em;
  margin-top: 5em;
  padding: 1em;
  font-size: 1.75rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<div class="hidden-xs container container-custom tabbed__images">
  <div class="container container__narrow">

    <div class="select-container">

      <!-- original HUBL -->
      <!--{% for item in module.tab_1 %} 
      <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}">
        <div class="text">{{ item.tab_header }}</div>
        <div class="line"></div>
        <div class="hidden description">{{ item.tabbed_text }}</div>
      </div>
      {% endfor %}-->

      <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}">
        <div class="text">Tab 1</div>
        <div class="line"></div>
        <div class="hidden_description">Text of tab 1</div>
      </div>

      <div class="item" style="width: 25%;" id="{{ loop.index }}" data-id="{{ loop.index }}">
        <div class="text">Tab 2</div>
        <div class="line"></div>
        <div class="hidden_description">Text of tab 2</div>
      </div>

    </div>

    <!-- show content here -->
    <p class="text-container">This text here will be replaced</p>

  </div>
</div>

根据另一个div中的ID更改div内容

1 个答案: