当选择不同的类别时，jQuery会更改页面上多个元素的活动状态

Question

jQuery新手在这里以及关于stackexchange的第一个问题 - 请放心。

我有一个带有标签式菜单的页面（5个页内导航标签/“要素类别”）和一长串~28个“功能”。每个要素类别（选项卡）都有大约5-6个相应的要素。

HTML

<div class="page_features_overview">

    <div class="container public_content_container">

        <div class="tabbed_content">

            <div class="col span_2">

                <div class="tabs_container">
                            <div class="tab feature_category_1 selected">Feature Category 1<div class="indicator"></div></div>
                            <div class="tab feature_category_2">Feature Category 2<div class="indicator"></div></div> <!-- etc. -->
                            <div class="tab feature_category_3">Feature Category 3<div class="indicator"></div></div>
                            <div class="tab feature_category_4">Feature Category 4<div class="indicator"></div></div>
                    <div class=“tab feature_category_5”>Feature Category 5<div class="indicator"></div></div>
                </div> <!-- CLOSE .tabs_container -->

            </div>

            <div class="col span_10">

                <div class="features_grid">

                    <div class="feature_box feature_category_1 highlighted">
                        <i class="zmdi zmdi-search zmdi-hc-3x feature_overview_icon"></i>
                        <div class="feature_title">
                            Feature title text here
                        </div>
                        <div class="feature_description">
                            Feature description text here.
                        </div>
                    </div>

                    <div class="feature_box feature_category_4 highlighted">
                        <i class="zmdi zmdi-settings zmdi-hc-3x feature_overview_icon"></i>
                        <div class="feature_title">
                            Feature title text here
                        </div>
                        <div class="feature_description">
                            Feature description text here.
                        </div>
                    </div>

                    <div>
                        … etc.
                    </div>

                </div> <!-- CLOSE .features_grid -->

            </div> <!-- CLOSE .col .span_10 -->

        </div> <!-- CLOSE .tabbed_content -->

    </div> <!-- CLOSE .container .public_content_container -->

</div> <!-- CLOSE .page_features_overview -->           

现在，我想要实现的是在选择相应的类别选项卡时突出显示功能。我知道这可以通过在选择每个选项卡时更改功能的活动状态来完成，但我不知道该怎么做。

JS

<script type="text/javascript">

  $(function() {
      $('.tabbed_content .tabs_container .tab').click(function(evt) {
        var selectedTab = $(this);
        var featureGroup = selectedTab.parents('.tabbed_content');
        var allTabs = featureGroup.find('.tab');
        var allContent = featureGroup.find('.feature_box');

        // clear selections
        allTabs.removeClass('selected');
        selectedTab.addClass('selected');
        allContent.addClass('hidden');

        // find correlated content
        var idx = selectedTab.index();
        var selectedContent = $(allContent);
        selectedContent.removeClass('hidden');

        });
    });

</script>

此代码适用于选项卡菜单（即，它允许我选择和取消选择各个功能类别选项卡并将其状态更改为活动/'选中'）。但是，我正在努力的是如何将各个类别选项卡的选择与相应的功能联系起来，以便突出显示它们。

对不起，如果这是一个非常愚蠢的问题，但我迷路了。我将尽力澄清上述任何一项是否不清楚。谢谢！

Answer 1

要解决您的问题，我会更新你的小提琴。我在菜单链接rel中添加了一个属性，用于标识我们需要激活的框。然后我隐藏所有内容框，然后我只显示我需要的内容框：

https://jsfiddle.net/c0ee2y6c/5/

$(function() {
  $('.tabbed_content .tabs_container .tab').click(function(evt) {
    var selectedTab = $(this);
    var featureGroup = selectedTab.parents('.tabbed_content');
    var allTabs = featureGroup.find('.tab');
    var allContent = featureGroup.find('.feature_box');
    // get the rel attribute to know what box we need to activate
    var rel = $(this).attr('rel');
    
    // clear selections
    allTabs.removeClass('selected');
    selectedTab.addClass('selected');
    
    // hide all boxes
    $('.feature_box').each(function() {
      $(this).hide();
    });
    //show what we need
    $('.feature_box.feature_category_'+rel).show();

    // find correlated content
    var idx = selectedTab.index();
    var selectedContent = $(allContent);
    selectedContent.removeClass('hidden');

  });
});

.hidden {
  display:block;
  color: blue;
}

/* Features Overview page – CATEGORY TABS */

.page_features_overview .tabbed_content .tabs_container {
  margin-left:auto;
  margin-right:auto;
  float: left;
  margin:45px 0px
}

.page_features_overview .tabbed_content .tabs_container .tab {
  float:none;
  width:100%;
  color:#1193f6;
  text-align: left;
  padding-left: 24px;
  line-height:40px;
  height:40px;
  font-size:12px;
  border-left:1px solid #efefef;
  text-transform:uppercase;
  font-weight:500;
  overflow:hidden;
  cursor:pointer;
  position:relative
}

.page_features_overview .tabbed_content .tabs_container .tab .indicator {
  position:absolute;
  width:100%;
  height: 100%;
  display:none;
  bottom:0;
  left: 0
}

.page_features_overview .tabbed_content .tabs_container .tab:hover .indicator {
  display:block;
  border-left:4px solid blue
}


.page_features_overview .tabbed_content .tabs_container .tab.selected .indicator {
  display:block;
  border-left:4px solid red
}


/* Features Overview page – FEATURES GRID */

.page_features_overview .tabbed_content .features_grid {
  background:#fff;
  text-align: center;
}

.page_features_overview .tabbed_content .features_grid .feature_box {

  background:#fff;
  display:inline-block;
  margin:12px;
  padding:12px;
  text-align:center;
  vertical-align:top;
  width:120px;
  height:120px;
  border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12)
}

.page_features_overview .tabbed_content .features_grid .feature_box .selected {
  color: blue;
  background-color: yellow;
}

.page_features_overview .tabbed_content .features_grid .feature_box.selected .indicator {
  display:block;
  background-color: red;
  border:4px solid #1193f6
}

.page_features_overview .tabbed_content .features_grid .feature_box .feature_title {
  color:#363636;
  font-size:14px;
  font-weight:500;
  text-align:center;
  cursor: default;
}

.page_features_overview .tabbed_content .features_grid .feature_box .feature_description {
  color:#888;
  font-size:12px;
  line-height:18px;
  margin-top:6px;
  text-align:center;
  font-weight:400;
  cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="page_features_overview">

  <div class="container public_content_container">

    <div class="tabbed_content">

      <div class="col span_2">

        <div class="tabs_container">

          <div class="tab feature_category_1 selected" rel="1">Feature Category 1<div class="indicator"></div></div>
          <div class="tab feature_category_2" rel="2">Feature Category 2<div class="indicator"></div></div>
          <div class="tab feature_category_3" rel="3">Feature Category 3<div class="indicator"></div></div>
          <div class="tab feature_category_4" rel="4">Feature Category 4<div class="indicator"></div></div>
          <div class="tab feature_category_5" rel="5">Feature Category 5<div class="indicator"></div></div>

        </div> <!-- CLOSE .tabs_container -->

      </div>

      <div class="col span_10">

        <div class="features_grid">

          <div class="feature_box feature_category_1">
            <i class="zmdi zmdi-search zmdi-hc-3x feature_overview_icon"></i>
            <div class="feature_title">
              Feature title text here
            </div>
            <div class="feature_description">
              Feature description text here.
            </div>
          </div>

          <div class="feature_box feature_category_4 hidden">
            <i class="zmdi zmdi-settings zmdi-hc-3x feature_overview_icon"></i>
            <div class="feature_title">
              Feature title text here
            </div>
            <div class="feature_description">
              Feature description text here.
            </div>
          </div>

        </div> <!-- CLOSE .features_grid -->

      </div> <!-- CLOSE .col .span_10 -->

    </div> <!-- CLOSE .tabbed_content -->

  </div> <!-- CLOSE .container .public_content_container -->

</div> <!-- CLOSE .page_features_overview -->