Question

我在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框架看起来很脏，看起来做得不好，所以有我的问题：

还有另一种方法可以做得更好或更简单吗？

我的观点极其庞大，而且我有很多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;
}

感谢您的时间。

Answer 1

你试过隐藏的字段吗？您可以通过读取隐藏值来设置该选项卡，如：

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

请参阅full example。

Answer 2

在内容部分下面的js中创建一个数组

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

此处$activetab来自您的控制器。现在，您可以在javascript中使用pagedefaults.activetab等活动标签值，并激活标签。这也可以用于本地化和Ajax路由。

重定向

2 个答案: