Jquery 在 Laravel 5 Web 应用程序中激活的选项卡

Question

我正在开发带有 Jquery UI 选项卡的 laravel 网络应用程序。这是我页面的屏幕截图。

我有像

这样的标签

基本信息

联系方式

法律细节

业务类别

地点

Tha 五个选项卡具有表单和 laravel 发送更新功能..当用户从 联系信息 选项卡更新时，成功更新后，页面是重定向并加载第一个选项卡，如 基本信息。

我的更新控制器。

 public function edit_businessldaction(){

    try {
        $decrypted = Crypt::decrypt(Input::get('ciid'));
    } catch (DecryptException $e) {
         throw new DecryptException("Invalid data.");
    }
    $doaction = DB::table('business')
        ->where('pk_business_id', $decrypted)
        ->update([
            'ci_busns_name' => Input::get('ci_busns_name'),
            'ci_busns_addrs1' => Input::get('ci_busns_addrs1'),
            'ci_busns_addrs2' => Input::get('ci_busns_addrs2'),
            'ci_busns_addrs3' => Input::get('ci_busns_addrs3'),
            'fk_ci_busns_country' => Input::get('ci_busns_country'),
            'fk_ci_busns_city' => Input::get('ci_busns_city'),
            'ci_busns_telephone' => Input::get('ci_busns_telephone'),
            'ci_busns_fax' => Input::get('ci_busns_fax'),
            'ci_busns_web' => Input::get('ci_busns_web'),
            ]);
    if ($doaction)
        return Redirect::to(route('edit_business_view',Input::get('ciid')))->with('cimessage','Legal Details Updated Succesfuly !!');
    else
        return Redirect::to(route('edit_business_view',Input::get('ciid')))->with('cimessage','No changes are made !!');
}

以上截图页面的

URL为

http://localhost/genie-works/devojp/superadmin/edit-business/{id-randomkeyencrypted}

HTML :

 <div id="tabs">
 <ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>
  <li><a href="#tabs-2">Proin dolor</a></li>
 </ul>
 <div id="tabs-1">
 <p> Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci    tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
 </div>
<div id="tabs-2">
<p>eugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.    </p>

</div>
 </div>

Answer 1

如果您使用的是 named-route，您可以使用 blade 模板中的 Route::is 方法激活当前选项卡来确定当前 controller/action。

这是一个使用 bootstrap 选项卡的示例：

我正在使用 named-route 像这样：

 Route::get('/edit-business/{id-randomkeyencrypted}',[
    'uses' => 'ContactController@edit_businessldaction',
    'as'   => 'contact.edit_businessldaction'
 ]);

我要使用这个来激活右边的标签：

{{ Route::is('contact.edit_businessldaction') ? 'active' : '' }}

并通过执行此操作激活正确的内容：

{{ Route::is('contact.edit_businessldaction') ? 'tabname' : '' }}

注意：将 tabname 替换为您希望激活的标签内容 ID，例如：contact

在Blade模板中

<ul class="nav nav-tabs" role="tablist">
    <li role="contact-info" class="{{ Route::is('contact.edit_businessldaction') ? 'active' : '' }}"><a href="#contact" aria-controls="home" role="tab" data-toggle="tab">Contact Information</a></li>
  </ul>


<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="{{ Route::is('contact.edit_businessldaction') ? 'contact' : '' }}">...</div>
</div>

我相信这会给你一个想法

或

或者您可以 return 一个变量到您的视图，如下所示：

return Redirect::to(route('edit_business_view',Input::get('ciid')))
->with('cimessage','Legal Details Updated Succesfuly !!')
->with('active','business');

以后在您看来：

//For Tab
{{ $active=='business' ? 'active' : '' }}

//For Content
{{ $active=='business' ? 'tabname' : '' }}

Jquery 在 Laravel 5 Web 应用程序中激活的选项卡

Jquery Tabs activating in Laravel 5 Web application

php

jquery

tabs

laravel-5