实际问题

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>

然后我有一个标签控件（自动生成），运行时的页面检查器显示

enter image description here

这是实际的标签控件。它们是通过以下方式制作的：

@(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（带有值 - 这似乎是他们的版本＆＃39;控件的唯一ID）？我应该使用＆＃34;：Equals＆＃34;或＆＃34;：包含＆＃34;？

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

Html，根据要求：

Answer 1

这是一个艰难的。我不熟悉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);

    });

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

jQuery：包含Vs Equals

实际问题

1 个答案: