Laravel 5.4.6中的动态Bootstrap选项卡

时间:2017-03-19 03:22:09

标签: php laravel twitter-bootstrap-3

我在处理标签时遇到问题,我需要在标签enter image description here上从数据库呈现动态数据

这是代码:

<div class="tab-v1">
            <ul class="nav nav-tabs">
                <?php
                $categories = \App\ProjectCategory::all();
                $projects = \App\ProjectCompleted::all();
                $project = \App\ProjectCompleted
                    ::orderBy('title', 'desc')->first();

                ?>
                @foreach($categories as $cat)
                <li><a href="#{{$cat->name}}" data-toggle="tab">{{$cat->name}}</a></li>
                @endforeach
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <div class="row">
                        <div class="col-sm-3">
                            <ul class="nav nav-pills nav-stacked">
                                <!--<li class="active"><a href="#resi-project1" data-toggle="tab"><i class="fa fa-angle-right"></i> Residencial Project Name</a></li>-->
                                @foreach($projects as $p)
                                <li><a href="#resi-project2" data-toggle="tab"><i class="fa fa-angle-right"></i>{{$p->title}}</a></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-sm-9">

                            <div class="tab-content">
                                <div class="tab-pane fade in active" id="resi-project1">
                                    <h2>{{$project->title}}</h2>
                                    <div id="myCarousel" class="carousel slide carousel-v1">
                                        <div class="carousel-inner">
                                            <?php
                                            $images = \App\ProjectCompletedImage
                                                ::where('project_completed_id', $project->id)->get();
                                            ?>
                                            @foreach($images as $img)
                                            <div class="item active">
                                                <img src="{{asset('images/projects-completed-images/'.$img->image)}}" alt="">

                                            </div>
                                            @endforeach
                                        </div>

                                        <div class="carousel-arrow">
                                            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                                                <i class="fa fa-angle-left"></i>
                                            </a>
                                            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>




                            </div>

                            <p>{!!$project->details!!}</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

实际上,在这些选项卡上,数据来自类别表,单击选项卡时,它将显示相关数据。请指导我如何做到这一点。 enter image description here

问题图片

1 个答案:

答案 0 :(得分:2)

试试这个

plot.gam

注意

<div class="tab-v1">
        <ul class="nav nav-tabs">
            @foreach($categories as $cat)
            <li><a href="#{{$cat->name}}" data-toggle="tab">{{$cat->name}}</a></li>
            @endforeach
        </ul>

        <div class="tab-content">
            @foreach($categories as $cat)
            <div class="tab-pane fade in active" id="#<?php $cat->name ?>">
            <div class="row">
            <div class="col-sm-3">
            //  <p>Some content.</p>
            </div>

            </div>
            </div>
            @endforeach
        </div>
    </div>
你在视图中为查询编写的

代码不应该写在这里,它应该写在模型而不是视图中。