jQuery：包含与等于

Question

实际上，我确信以前（某处）曾有人问过这个问题，但我似乎无法以某种方式得到“正常”的答案。

我正在尝试使用 telerik 选项卡控件，并根据单击的链接文本选择打开选项卡。 页面总体布局：

+----------------------------------------+
|      HEADER                            |
+----------------------------------------+
| N  |+--------------------------------+ |
| A  ||    Tabstrip                    | |
| V  ||                                | |
| B  ||                                | |
| A  ||                                | |
| R  ||                                | |
|    ||                                | |
|    ||                                | |
|    |+--------------------------------+ |
+----+-----------------------------------+

即我的导航可能如下所示：

+-------------------------------------------------------------------------------------
|
|     HEADER                   
|                        
+------------------------+------------------------------------------------------------
| Users                  |    __________    __________    ___________
+------------------------+   /  Users   \  / Products \  / Suppliers \
| Products               |  /            \/____________\/_____________\_______________
+------------------------+ |
| Suppliers              | | Tab content here for users page
+------------------------+ |
| Orders                 | |
+------------------------+ |
| Stock                  | |
+------------------------+ |

所以，通过点击导航栏中的项目，我希望使相应的选项卡变为活动状态。

我的导航项是使用类似于以下内容的内容创建的：

<li id="users">    <a href="#">Users      </a></li>
<li id="products"> <a href="#">Products   </a></li>
<li id="suppliers"><a href="#">Suppliers  </a></li>
<li id="orders">   <a href="#">Orders     </a></li>
<li id="stock">    <a href="#">Stock      </a></li>

然后我有一个选项卡控件（它是自动生成的），并且页面检查器在运行时显示

这是实际的选项卡控件。它们是通过以下方式制成的：

@(Html.Kendo().TabStrip()
  .Name("tabMain")
  .Animation(true)

  .Items(items =>
      {
        /*index 0 */  items.Add().Encoded(false).ImageUrl("~/Content/Images/CLOSE.png").Text("Users&nbsp&nbsp&nbsp&nbsp").Content(Html.Action("Index", "User").ToString());
        /*index 1 */  items.Add().Encoded(false).ImageUrl("~/Content/Images/CLOSE.png").Text("Products   &nbsp&nbsp&nbsp&nbsp").Content(Html.Action("Index", "Products).ToString());
        /*index 2 */  items.Add().Encoded(false).ImageUrl("~/Content/Images/CLOSE.png").Text("Suppliers&nbsp&nbsp&nbsp&nbsp").Content(Html.Action("Index", "Suppliers").ToString());
        /*index 3 */  items.Add().Encoded(false).Text("Orders").Content(Html.Action("Index", "Orders").ToString());
        /*index 4 */  items.Add().Encoded(false).Text("Stock").Visible(false).Content(Html.Action("Index", "Stock").ToString());

      })
 )

实际问题

我希望能够按下导航栏上的按钮并显示指定的选项卡/使其处于活动状态。

所以，足够的背景，我目前正在使用 jquery：

 $('#stock').click(function(e){
            //alert("Stock is what was pressed");
            $('#tabMain-1').toggle(); //simply used for testing purposes
            $("");
 });

尝试选择相应的选项卡。

我的选择器应该是什么来获得唯一的选项卡 id/index/aria-controls（带有值 - 这似乎是他们的“控件的唯一 id”版本）？我应该使用“:Equals”还是“:Contains”？

或者我应该使用完全不同的东西来选择这个标签标题名称吗？

Html，根据要求：

Answer 1

这是一个艰难的过程。我不熟悉剑道控件，但根据您的标记，我认为下面的代码可能会起作用。仅当您的导航项与选项卡项的顺序完全相同时，该代码才有效，即：下面的代码使用基于索引的搜索。

    $('.nav li').click(function(){

        //get the index of the nav item that was clicked
        var index = $('.nav li').index(this);

        //remove the active css class from all of the tabs
        $('.k-tabstrip-items .k-item').removeClass('k-state-active');

        //get the tab at the specific index
        var tabItem = $($('.k-tabstrip-items .k-item').get(index));

        //add the active css class to the tab
        tabItem.addClass('k-state-active');

        //get the tab id from the tab item
        var newTabId = tabItem.attr('aria-controls');

        //remove the active css class from all of the tab content divs
        $('.k-content')
            .removeClass('k-state-active')
            .attr('aria-expanded', false)
            .attr('aria-hidden', true);

        //add the active css and set the aria properties for the selected tab content div
        $('#' + newTabId)
            .addClass('k-state-active')
            .attr('aria-hidden', false)
            .attr('aria-expanded', true);

    });

注意：此代码假定您的<ul> 标记具有nav 类，即：<ul class="nav">。如果没有，您需要稍微更改一下 javascript。