Semantic ui dropdown menu active item not updating
Question
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.
Ie 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.
<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.
1 answers
solution1
1 ACCPTED 2018-06-13 16:13:16
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.