我该如何使这个Tab控制器代码更简洁一些？

Question

How would I be able to simplify this jquery code. I feel like I am repeating myself and just wondering if there is a shorter way to write this which I'm sure there is. I am a bit new to javascript and jquery. I have created a two tabs with their own containers with miscellaneous information in them. Basically I want the container to open when it's related tab is clicked on. I also would like the tab to be highlighted when it's active. Also, how would I be able to write code to make all tab containers disappear when you click off from the tab containers.

<!-- HTML Code -->
<div class="sort-filters">
  <span class="sort-by active">SORT BY</span>
  <span class="filter">FILTER</span>
</div>

<div class="sort-containers">
  <div class="sort-by-container">Sort by click me here</div>
  <div class="filter-container">Filter click me here</div>
</div>

/* CSS */
.sort-filters {
  display: flex;
  width: 500px;
  height: 30px;
}

.sort-by,
.filter {
  background: #CCC;
  color: #756661;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
  cursor: pointer;
}

.sort-by-container,
.filter-container {
  width: 500px;
  background: #756661;
  color: #FFF;
  height: 100px;
  display: none;
}

.active {
  background: #756661;
  color: #FFF;
  transition: 0.2s;
}

// Jquery Code
js = $.noConflict();
var sort = js('.sort-by');
var filter = js('.filter');
var sortContainer = js('.sort-by-container');
var filterContainer = js('.filter-container');

js(sort).click(function() {
  js(filterContainer).hide();
  js(sortContainer).show();
  js(sort).addClass('active');
  js(filter).removeClass('active');
});

js(filter).click(function() {
  js(sortContainer).hide();
  js(filterContainer).show();
  js(filter).addClass('active');
  js(sort).removeClass('active');
});

Answer 1

In order to avoid such repetitive actions I like to stick to naming conventions, so that I can apply the ID's, classes or attributes from one element to select other elements, for instance:

<div id="tabs">
  <span class="active" data-type="sort-by">SORT BY</span>
  <span data-type="filter">FILTER</span>
</div>

Now, all you need is one click handler on #tabs span , and get the data-type of the span you clicked on. You can use that to filter on the classes of the other container elements.

The second thing is that you can attach handler to more than 1 element at the same time. So in your example, js('#sort-containers div').hide(); will hide all the div 's that match the selector at once.

results

I changed some classes to ID's, and some classes to data attributes. Here's a fiddle: https://jsfiddle.net/mq9xk29y/

HTML:

<div id="tabs">
  <span data-type="sort-by">SORT BY</span>
  <span data-type="filter">FILTER</span>
</div>

<div id="sort-containers">
  <div class="sort-by-container">Sort by click me here</div>
  <div class="filter-container">Filter click me here</div>
</div>

JS:

js = $.noConflict();
var $tabs = js('#tabs span');
$tabs.click(function() {
  var $clicked = js(this); //get the element thats clicked on
  var type = $clicked.data('type'); //get the data-type value

  $tabs.removeClass('active'); //remove active from all tabs
  $clicked.addClass('active'); //add active to the current tab
  js('#sort-containers div').hide(); //hide all containers
  js('.' + type + '-container').show().addClass('active'); //add active to current container
});

As long as you follow the naming convention of data-type: bla in the tabs, and bla-container on the classes in sort-container , you never have to worry about coding for additional tabs.

There might still be things that could be further optimised, but at least it'll take care of the repetition.