Fomantic-UI メニューの項目をアクティブにしたけど他の項目を選択してもアクティブのまま

/ Fomantic-UI / By
ショコラ
ショコラ

Fomantic-UI メニューの項目をアクティブにしたけど他の項目を選択してもアクティブのまま

メニューのサンプルを用意しました。
Fomantic-UI のページのサンプルをコピペしてもアクティブの箇所はずっとアクティブのままでした。
これ JavaScript で制御しなければならないみたいです・・・。

もっさん先輩
もっさん先輩

とりあえず作ったサンプルがこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
</head>
<body>

<div class="ui main container">
  <div class="ui secondary menu">
    <a class="item">
      Home
    </a>
    <a class="item">
      Messages
    </a>
    <a class="item active">
      Friends
    </a>
    <div class="right menu">
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
      </div>
      <a class="ui item">
        Logout
      </a>
    </div>
  </div>
</div>

<script>
semantic = {}; // ←追加
semantic.menu = {};

// ready event
semantic.menu.ready = function() {

  // selector cache
  var
    $dropdownItem = $('.main.container .menu .dropdown .item'),
    $popupItem    = $('.main.container .popup.example .browse.item'),
    $menuItem     = $('.main.container .menu a.item, .menu .link.item').not($dropdownItem),
    $dropdown     = $('.main.container .menu .ui.dropdown'),
    // alias
    handler = {

      activate: function() {
        if(!$(this).hasClass('dropdown browse')) {
          $(this)
            .addClass('active')
            .closest('.ui.menu')
            .find('.item')
              .not($(this))
              .removeClass('active')
          ;
        }
      }

    }
  ;

  $dropdown
    .dropdown({
      on: 'hover'
    })
  ;

  $('.main.container .ui.search')
    .search({
      type: 'category',
      apiSettings: {
        action: 'categorySearch'
      }
    })
  ;

  $('.school.example .browse.item')
    .popup({
      popup     : '.admission.popup',
      hoverable : true,
      position  : 'bottom left',
      delay     : {
        show: 300,
        hide: 800
      }
    })
  ;

  $popupItem
    .popup({
      inline   : true,
      hoverable: true,
      popup    : '.fluid.popup',
      position : 'bottom left',
      delay: {
        show: 300,
        hide: 800
      }
    })
  ;

  $menuItem
    .on('click', handler.activate)
  ;

};


// attach ready event
$(document)
  .ready(semantic.menu.ready)
;
</script>
</body>
</html>

短く対応するなら

// アクティブメニューのおまじない
$('.secondary.menu .item').on('click',function() {
  $(this)
  .addClass('active')
  .closest('.ui.menu')
  .find('.item')
  .not($(this))
  .removeClass('active')

以上

Scroll to Top