css 如何在php中增加data-target值

hfwmuf9z 于 2023-03-09 发布在 PHP

关注(0)|答案(1)|浏览(119)

x1c 0d1xHello我正在尝试为我的WordPress站点创建一个3标签块。当用户点击标签1时，他们将获得标签1的内容，当他们点击标签2时，他们会得到标签2的内容等等。我的问题是我不知道如何增加数据目标值。由于它的所有三个标签都有一个目标值“标签-1”，它将不符合CSS。其他内容不会隐藏。另外，我不希望我的活动类也被循环，我只希望黄色的活动css类出现在第一个选项卡上。谢谢

//=====Tab Row CSS=======
.nav-tabs li::before {
    content: ''!important;
}
.nav-tabs {
/*  display: flex; */
/*  padding: 0 100px 0; */
/*  background-color: #2f1400; */
    border-bottom: 2px solid $color-text;
margin-bottom: 1rem;
}
@media (min-width: 576px) {
    .nav-tabs .nav-item {
        max-width: 233px;
    }
    .nav-tabs {
            flex-wrap: nowrap;
    }
}
.nav-tabs li a.active,
.nav-tabs li:hover a{
    background-color: $color-gold !important;
    color: $color-text !important;
}
.nav-tabs li a{
    background-color: #fff;
    border: 1px solid $color-text !important;
/*  border-radius: 0 !important; */
    color: $color-text;
    display: inline-block;
    padding: 5px 15px;
    margin-right: -1px;
    font-size: 1rem;
    font-weight: 700;
}
.nav-content {
    max-width: 1200px;
    display: block;
    margin: 0 auto;
}
@media (max-width: 575px) {
    .nav-tabs li a{ 
    border-radius: 0 !important;
        width: 100%;
        padding: 1rem;
    }
    .nav-tabs li {
        width: 100%;
    }
    
}

<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
    $tabs = get_field('tab' );
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $headline = $tab['headline'];
        ?>
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#tab-1"
    type="button" role="tab" aria-controls="home" aria-selected="true"><?php echo $headline; ?></a>
  </li>
  <?php endforeach; ?>
    <?php endif; ?>
</ul>
<div class="tab-content page" id="myTabContent">
<?php
    $tabs = get_field('tab' );
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $description = $tab['description'];
        ?>
  <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
  <p><?php echo $description; ?></p>
  </div>
  <?php endforeach; ?>
    <?php endif; ?>
  

 
</div>

css

来源：https://stackoverflow.com/questions/75667806/how-to-increment-the-data-target-value-in-php

1条答案

按热度按时间

bvn4nwqk1#

创建一个变量，从你想要的数字开始，比如1，然后在循环中使用PHP's post-increment$a++来增加它的值。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <?php
    $tabIndex = 1;
    $tabs = get_field('tab');
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $headline = $tab['headline'];
        ?>
    <li class="nav-item" role="presentation">
      <a class="nav-link<?php if ($tabIndex === 1) { echo ' active'; } ?>" id="home-tab" data-toggle="tab" data-target="#tab-<?php echo $tabIndex; ?>" type="button" role="tab" aria-controls="home" aria-selected="true">
        <?php echo $headline; ?>
      </a>
    </li>
    <?php $tabIndex++; ?>
    <?php endforeach; ?>
    <?php endif; ?>
</ul>
<div class="tab-content page" id="myTabContent">
  <?php
    $tabIndex = 1;
    $tabs = get_field('tab');
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $description = $tab['description'];
        ?>
    <div class="tab-pane fade show<?php if ($tabIndex === 1) { echo ' active'; } ?>" id="tab-<?php echo $tabIndex; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $tabIndex; ?>">
      <p>
        <?php echo $description; ?>
      </p>
    </div>
    <?php $tabIndex++; ?>
    <?php endforeach; ?>
    <?php endif; ?>
</div>

赞(0）回复(0）举报 2023-03-09

我来回答

css 如何在php中增加data-target值

1条答案

相关问题

热门标签

最新问答