单击没有数据的选项卡时隐藏上一个选项卡的数据

时间:2017-12-21 17:54:10

标签: javascript laravel

<div class="col-lg-12">
      <div class="tabs-container">
        <ul class="nav nav-tabs">
          @foreach($departments as $department)
          <li class=""><a data-toggle="tab" onclick="" href="#tab-{{ $department->id }}" aria-expanded="false">{{ $department->name }}</a></li>
          @endforeach

        </ul>

       <div class="tab-content">
    @foreach($works as $department_id => $department_works)
        <div id="tab-{{ $department_id }}" class="tab-pane">
            <div class="panel-body">
                <div class="row employees">
                    @foreach($department_works as $work)
                    <div class="col-md-3">
                        <div class="thumbnail">
                            <div class="image view view-first"> <img class="img-responsive" src="{{asset('images/'.$work->smallimg)}}"  alt="image"> </div>
                            <div class="caption">
                                <h4>{{ $work->address }}  </h4>
                                <p>{{ $work->body }}</p>
                            </div>
                        </div>
                        <a class="btn btn-primary" href="{{ route('portfolios.edit', $work->id) }}"> تعديل</a>


                      <form class="myform-{{$work->id}}" action="{{route('portfolios.destroy',$work->id)}}" style="display: none;" method="post">
                {{csrf_field()}}
                {{method_field('DELETE')}}
              </form>
              <Button id="{{$work->id}}" class="btn btn-danger delete" data-toggle="tooltip" title="Delete">حذف
              </Button>

                    </div>
                    @endforeach

这是我的观看代码。当我点击任何标签时,它会获得与此标签相关的数据。

现在我有两个问题:

  • 当任何标签中没有数据时,我点击另一个标签,我会得到与之相关的数据;当我回去时,仍会显示上一个标签的数据,因为它没有要查看的数据。

  • 删除按钮功能适用于除第一个标签中第一条记录以外的所有页面

以下是删除按钮的JavaScript:

<script type="text/javascript">
$('button.delete').on('click', function(e){
    e.preventDefault();
    var del = $(this);
    swal({   
      title: "هل انت متاكد ؟",
      text: "لن تكون قادرا على استرداد هذا الملف !",
      type: "warning",   
      showCancelButton: true,   
      confirmButtonColor: "#DD6B55",
      cancelButtonColor: "#f00",
      confirmButtonText: "نعم, احذف هذا !",
      cancelButtonText: "لا , الغى الامر",
      closeOnConfirm: true,
      closeOnCancel: false 
    },
    function(isConfirm){
      if (isConfirm) {
        $(".myform-"+del.attr('id')).submit();
      }else {
        swal("الغى", "ملف  آمن ", "error");
      }
    });
  });
</script>

当我点击没有数据的标签时,我可以隐藏上一个标签的数据吗?

1 个答案:

答案 0 :(得分:0)

要在单击另一个选项卡时隐藏一个选项卡,请使用css。试试这个......

.tab-content.hide{
display: none;}

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