Question

我想基于div和li显示class=active，以便如果li没有class active ，div应隐藏。

这是我的代码（我已经评论了我需要显示/隐藏div的代码）

    @if ( ! $links->isEmpty())
        <div id="videos">
                <table class="table table-striped links-table">
                <thead>
                    <tr>
                        <th class="name">{{ trans('stream::main.name') }}</th>
                        <th>{{ trans('stream::main.quality') }}</th>
                        <th>{{ trans('stream::main.report') }}</th>
                        <th>{{ trans('stream::main.added') }}</th>
                    </tr>
                </thead>
                <tbody>
            <ul class="nav nav-tabs">

                @foreach ($links as $k => $video)             
                        @if((int)$video->approved)


                            <li {{ $k === 0 ? 'class="active"' : null }} id="{{$video->id}}" style="list-style-type: decimal-leading-zero;">
                            <table class="table table-striped links-table"><tr>
                                <td class="name hover">
                                <a href="#" data-bind="click: renderTab.bind($data, {{(int)$video->id}}, '{{$video->url}}', '{{$video->type}}', 500)">
                                    <img data-bind="attr: {src: app.utils.getFavicon('{{$video->url}}')}"> {{ $video->label }}</a></td>
                                <td style="width:110px;">{{$video->quality}}</td>
                                <td style="width:110px;"><i class="fa fa-warning text-primary"></i> <a href="#" data-bind="click: report.bind($data, '{{$video->id}}')">{{ trans('stream::main.report') }}</a></td>
                                <td style="width:110px;">{{$video->created_at->diffForHumans()}}</td>
                            </tr></table>
                            </li>
//------DOWN IS THE DIV, AND NEED TO DISPLAY JUST IF THE CLASS IS ACTIVE-------------
                            <div class="tab-content"></div>
//-------------------
                        @endif             
                @endforeach

            </ul>
                </tbody>
            </table>

        </div>

        <video id="trailer" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="100%" height="500px"> </video>
    @endif

Answer 1

why not do this.

@if($k === 0)
<div class="tab-content"></div>
@endif

or

<div {{ $k === 0 ? 'style="display:none"' : '' }} class="tab-content"></div>

Update

what would i do in your case is something like this.

in your li add a class.

    <li class="video_content" id="{{$video->id}}" 
             style="list-style-type: decimal-leading-zero;">

then i put the div inside the list. right now if you inspect the list it's not rendering correctly.

<li class="video_content" id="{{$video->id}}" 
                 style="list-style-type: decimal-leading-zero;">
   //CONTENTS
   <div {{ $k === 0 ? 'style="display:none"' : '' }} class="tab-content"></div>
</li>

then i'll add a jquery script

<script>
  $(document).ready(function(){
    $('.video_content').click(function(){
       $(this).find('tab-content').show();
    });
 });
</script>

Answer 2

你不能PHP对课程做出反应;它应该是另一种方式，PHP确定事物的类，因为它生成HTML。这可以仅使用CSS来完成：隐藏您想要隐藏的元素，当它们获得您想要的类时将它们设置为可见。一个简单的样本：

＆＃13;

.invisible-when-inactive {
  display: none;
}
.invisible-when-inactive.active {
  display: block;
}

＆＃13;

<div>
  Normal div
</div>
<div class="invisible-when-inactive">
  Hidden div 1
</div>
<div class="invisible-when-inactive active">
  Active hidden div
</div>

＆＃13;

Answer 3

如果您希望避免编写JavaScript，Amadan的CSS方法效果很好，但如果它是一个选项，您可以使用li上的ID来检查它有一个课程：

if ($('#idOfListItem').hasClass('active')) {
    $('#idOfDiv').show();
} else {
    $('#idOfDiv').hide();
}

您需要为与div相关联的li分配一个ID（或一起工作的类），以便使用此方法进行显示和隐藏。

Answer 4

这不应该用PHP完成。它应该用CSS完成。确保按照列出的确切顺序将它们添加到您的css文档中

隐藏状态

.tab-content {
   display: none;
}

活跃状态

li.active + .tab-content {
   display: block;
}

if else - php显示基于css值？是posibol？

4 个答案: