存储功能

Question

我有一个包含5个标签的索引视图。当我点击硬件标签时，这就是我看到的内容。

点击“创建”时，我启动此模态

我提交的时候，我收到了一个警报通知，一切都很好。

但它引导我到我的第一个标签。如何重定向回第二个标签？

存储功能

public function store() {

        $inputs = Input::all();
        unset($inputs['_token']);


        $cpe_mac = $inputs['mac1'].$inputs['mac2'].$inputs['mac3'].$inputs['mac4'].$inputs['mac5'].$inputs['mac6'];

        $cpe = [];

        $cpe['cpe_mac'] = $cpe_mac;
        $cpe['bandwidth_max_up'] = (int)$inputs['max_up'];
        $cpe['bandwidth_max_down'] = (int)$inputs['max_down'];

        $json = json_encode($cpe);

        $url = 'http://172.16.139.129:1234/vse/vcpe';
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
        curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $result = curl_exec($ch);
        curl_close($ch);


        $result_json =  json_decode($result, true);

        $id = $inputs['account_id'];


        if ( $result_json['status'] == '200') {
        return Redirect::to('/account/'.$id.'/#hardware') ->with('success','The CPE was created succesfully!');
    } else {
        return Redirect::to('/account/'.$id.'/#hardware') ->with('error', $result_json['message']);
    }

    }

Tab.blade.php

<!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class=""><a href="#details" data-toggle="tab"><strong>Details</strong></a></li>
    <li class=""><a href="#hardware" data-toggle="tab"><strong>Hardware(s)</strong></a></li>
    <li class=""><a href="#access-methods" data-toggle="tab"><strong>Access Methods</strong></a></li>
    <li class=""><a href="#linked-networks" data-toggle="tab"><strong>Linked Networks</strong></a></li>
    <li class=""><a href="#options" data-toggle="tab"><strong>Options</strong></a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content mb30">

    @include('account.show.details')
    @include('account.show.hardwares')
    @include('account.show.access-methods')
    @include('account.show.linked-networks')
    @include('account.show.options')

  </div>

Answer 1

您可以提取选项卡名称（#hardware）并将其传递到视图中。并且在视野中你可以做这样的事情

<li class="{{ empty($tabName) || $tabName == 'hardware' ? 'active' : '' }}"><a href="#hardware" data-toggle="tab"><strong>Hardware(s)</strong></a></li>

并且在包含的选项卡内容中，您将拥有一个class =“tab-pane”的元素。还要将此条件添加到该元素，例如

<div id="hardware" class="tab-pane {{ !empty($tabName) && $tabName == 'hardware' ? 'active' : '' }}">

Answer 2

至于你在网址中使用哈希值，这样做更容易：

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

如果页面加载了任何标签的哈希，它将在每个标签点击上更改哈希并打开标签。

Answer 3

我来晚了，但这里有一个使用 withInput() 和 old() 的解决方案。确保 ID 匹配

标签导航：在导航组件中添加id

<ul class="nav nav-tabs" id="nav-tab">
  <li><a href="#details" data-toggle="tab">Galleries</a></li>
</ul>

标签窗格：

<div class="tab-pane" id="details">

功能：这里我们传入要使用 withInput() 重定向的选项卡窗格 id

return redirect()->back()->withInput(['tab' => 'details']);

Javascript：这里我们使用 old() 助手来访问通过 withInput() 传递的选项卡窗格 id 并将该选项卡设置为活动

$(document).ready(function () {
  $('#nav-tab a[href="#{{ old('tab') }}"]').tab('show')
});

就是这样！

Answer 4

$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
         $('#IDOFTAB a[href="' + activeTab + '"]').tab('show');
    }
});

重定向回Laravel中的特定选项卡窗格

存储功能

Tab.blade.php

4 个答案: