jQuery：包含Vs等于

debugcn 发表于 Dev

but

我确实可以肯定，这是在某个地方被问过的，但是我似乎无法以一种或另一种方式得到“正常”的答案。

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

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

即我的导航可能看起来像这样：

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

因此，通过单击导航栏中的一个项目，我希望使相应的选项卡变为活动状态。

我的Nav项目的创建类似于以下内容：

<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，根据要求：

马克879

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

    $('.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);

    });