Question posted in 
I have single page app where user should be able to select the value from the main menu and display container on the screen. If they select different value then everything but that container should not be visible. Here is example of my html.
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li><a href="#" id="container1">Container 1</a></li>
<li><a href="#" id="container2">Container 2</a></li>
<li><a href="#" id="container3">Container 3</a></li>
<li><a href="#" id="container4">Container 4</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>
</div>
</body>
</html>Each container should use the entire space of the main container and show the content. Every time user selects different container all other containers should be invisible. I have used this method:
$('.container > div[id=' + id + ']').show();
$('.container > div:not([id=' + id + '])').hide();
Where id should have currently selected element id. This works in majority of the browsers but I found some issues in Safari. For some reason previous container is not set to display:none. Since I’m using Bootstrap-twitter and JQuery I’m wondering if there is better way to handle this situation? I need something reliable and compatible in cross browsers. If anyone knows the best way to do this please let me know. Thank you.
2
Answers
You could simply put another identifier on all of the containers to reliably match them.
Then you can hide every container and only show the ID accordingly.
That should work in all but the most ancient browsers. If you need support for ancient browsers, instead of the custom attribute, you could use a custom class on those containers and select via that.
(Also note that, if you want to select by ID, you do not need to be unnecessarily specific. IDs are required to be unique)
You are using id’s multiple times, an id should be used only once since it has to be unique. So I removed the id’s from the navigation items!
I added the classname
testclassto the divs that should be shown/hidden based on the decision made in the navigation, when an navigation item is clicked it will hide all elements with the classtestclass.Then I added the attribute
data-target-idto the navigation items, this attribute will contain the id of the element (div) that should be shown again.Still don’t understand? Take a look at: https://codepen.io/joostm020/pen/YeRwJG
Example code: