CODEWITHSUNDEEP
javascripthtmlsemantic-ui
fifthace
fifthace

Reputation: 546

Semantic ui dropdown menu active item not updating

I have a Semantic UI horizontal menu where one element is a dropdown item. The menu works fine, but if I select something from the dropdown menu, the last item that was active remains active, along with the dropdown selection.

I.e. selecting A, B or C from the example below leaves 'First' as being active, rather than 'Third'. I think some javascript is required to change this behaviour (perhaps onclick?), but I can't quite get it to work. Screenshot of menu

<html><head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
</head>
<body style="min-height: 611px;">
  <div class="ui center aligned container">
    <div id="menu-kpjwspgiojoilrelsvrv" class="ui menu ">
      <a class="item active" data-tab="tab-lwmtuiwnyoqcdotdmugl">
        <div>First</div>
      </a>
      <a class="item " data-tab="tab-rmdnlmdtoiyygingzyec">
        <div>Second</div>
      </a>
      <div class="ui pointing dropdown link item">
        <span class="text">Third</span>
        <i class="dropdown icon"></i>
        <div class="ui menu ">
          <a class="item" data-tab="tab-ygxtebqhvtdlosqlgwbh">
            <div>A</div>
          </a>
          <a class="item" data-tab="tab-fzpzmnrxwpbyveyxpgva">
            <div>B</div>
          </a>
          <a class="item" data-tab="tab-tonyqvwtiukfnvnpehyr">
            <div>C</div>
          </a>
        </div>
      </div>
      <div id="menu-kpjwspgiojoilrelsvrv" class="right menu">
        <a class="item " data-tab="tab-jgophjlxfwrpdkzribht">
          <div>Log out</div>
        </a>
      </div>
    </div>
    <div class="ui tab bottom tab segment active" data-tab="tab-lwmtuiwnyoqcdotdmugl"></div>
    <div class="ui tab bottom tab segment " data-tab="tab-rmdnlmdtoiyygingzyec"></div>
    <div class="ui tab bottom tab segment" data-tab="tab-ygxtebqhvtdlosqlgwbh"></div>
    <div class="ui tab bottom tab segment" data-tab="tab-fzpzmnrxwpbyveyxpgva"></div>
    <div class="ui tab bottom tab segment" data-tab="tab-tonyqvwtiukfnvnpehyr"></div>
    <div class="ui tab bottom tab segment " data-tab="tab-jgophjlxfwrpdkzribht"></div>
    <script>$('.ui.pointing.dropdown.link.item').dropdown({action: 'select'});</script>
</div>
</body>
</html>

The code above does not work quite as expected, as I am developing in an R Shiny environment and therefore missing a js or stylesheet that is loaded locally.

Bonus question: how can I change the Log out item to perform the following command (sending it to a parent iframe):

window.top.location.href = 'https://example.com/logout'

If it was a button, I could do: 

<a class='ui button' onclick ="window.top.location.href = 'https://example.com/logout';">Log out</a>

but I'm not sure how to fit this into a menu.

Upvotes: 2

Views: 1905

Answers (1)

akshaypjoshi
akshaypjoshi

Reputation: 1295

You need to initialise your tab elements using semantic js code. For your case use below code:

<script type="text/javascript">
    $('.ui .item').tab();
</script>

which will initialise your list and dropdown list items.

Updated code for active elements.

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.dropdown .item',function(e){
        $('.ui .item').removeClass('active');
        $(this).addClass('active');
});
});
</script>

Upvotes: 1

Related Questions