記住最後一個標籤後重定向

我有很多標籤和形式對Laravel一個複雜的視圖，用戶可以瀏覽的標籤頁，並做各種形式提交的每個選項卡上，之後提交控制器返回相同的觀點用當前選項卡的變量，如下所示：記住最後一個標籤後重定向

...Controller actions... 

return view("store.tesla.user.components") 
       ->with('tab', '3');

每個標籤有一個ID，所以當我回到我的看法我只是搜索活動選項卡，把主動與jQuery這樣的：

var tb_active = <?php echo $tab; ?> 
$('#'+tb_active).addClass('active');

其實它的工作原理，但我覺得很混淆PHP + JS特別使用Laravel框架d看起來不那麼好做，所以也有我的問題/ S：

還有另一種方式做的更好或者更簡單嗎？

我的看法是大的極端，我有很多的CSS類的，如果我有複製我的代碼將是混亂的，所以我叉引導選項卡的codepen更好的展示:)

https://codepen.io/Troyer/pen/MbGQPJ

HTML

<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div> 
<div id="exTab1" class="container"> 
<ul class="nav nav-pills"> 
      <li class="active"> 
     <a href="#1a" data-toggle="tab">Overview</a> 
      </li> 
      <li><a href="#2a" data-toggle="tab">Using nav-pills</a> 
      </li> 
      <li><a href="#3a" data-toggle="tab">Applying clearfix</a> 
      </li> 
     <li><a href="#4a" data-toggle="tab">Background color</a> 
      </li> 
     </ul> 

      <div class="tab-content clearfix"> 
       <div class="tab-pane active" id="1a"> 
      <h3>Content's background color is the same for the tab</h3> 
       </div> 
       <div class="tab-pane" id="2a"> 
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> 
       </div> 
     <div class="tab-pane" id="3a"> 
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3> 
       </div> 
      <div class="tab-pane" id="4a"> 
      <h3>We use css to change the background color of the content to be equal to the tab</h3> 
       </div> 
      </div> 
    </div> 


<!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

CSS

body { 
    padding : 10px ; 

} 

#exTab1 .tab-content { 
    color : white; 
    background-color: #428bca; 
    padding : 5px 15px; 
} 

#exTab2 h3 { 
    color : white; 
    background-color: #428bca; 
    padding : 5px 15px; 
} 

/* remove border radius for the tab */ 

#exTab1 .nav-pills > li > a { 
    border-radius: 0; 
} 

/* change border radius for the tab , apply corners on top*/ 

#exTab3 .nav-pills > li > a { 
    border-radius: 4px 4px 0 0 ; 
} 

#exTab3 .tab-content { 
    color : white; 
    background-color: #428bca; 
    padding : 5px 15px; 
}

謝謝你的時間。

來源

2016-12-07 Troyer

如果你有形式的每個選項卡，然後你知道哪種形式是哪個選項，這樣你們可以通過標籤識別碼，從控制器本身，並使用上述烏爾js代碼。但如果每個標籤都沒有形式，那麼我想你做的是正確的，唯一的辦法。 –

@Purushottamzende只有一些信息標籤。如果這是正確的方式，我很高興。 :) – Troyer

試試這個[答案]（http://stackoverflow.com/questions/14313270/jquery-ui-tabs-no-longer-supporting-cookie-now-what/14313315#14313315） –

你試過隱藏的字段。您可以通過讀取隱藏值來設置該選項卡：

$(".selector").tabs({ active: $('#your-hidden-fiel').val() });

請參閱full example。

來源

2016-12-07 09:22:27

創建以下內容部分JS數組

var pagedefaults = { 
     activetab: "{{ $activetab }}", 
};

這裏$activetab從控制器到來。現在你可以在你的javascript和make選項卡中使用活動標籤值，如pagedefaults.activetab。這也可以用於本地化和Ajax路由。

來源

2016-12-07 10:04:22 Bugfixer

記住最後一個標籤後重定向

回答

相關問題