muscle view MHF
New Member
So Im building a simple tabbed ui page with the data feed through a websocket. One thing that I cant seem to find or figure out is how to select multiple tabs at the same time. Example being, when Tab2 is selected only show data from Tab2, but when Tab3 is selected it brings in the data from Tab3 into Tab2 while have Tab3 look as if it was selected as well (both tabs being red). When it(Tab3) is selected again, it(Tab3) stops that stream and continues showing Tab2 data. The server side of this is done but I cant seem to figure out client side. Attached is my example:http://jsfiddle.net/EhJCb/HTML:\[code\]<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Connector</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/chat/css/style.css" type="text/css" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/chat/js/tablesorter/css/theme.dark.css" type="text/css" /></head><body onload="onLoadFunc()"> <div id="wrapper"> <ul class="tabs"> <li><a href="http://stackoverflow.com/questions/14411696/#" class="defaulttab all" rel="tabs1">ALL</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="stdout" rel="tabs2">STDOUT</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="ai" rel="tabs3">AI</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="camera" rel="tabs4">CAMERA</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="particles" rel="tabs5">PARTICLES</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="script" rel="tabs6">SCRIPT</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="animation" rel="tabs7">ANIMATION</a></li> <li><a href="http://stackoverflow.com/questions/14411696/#" class="havok" rel="tabs8">HAVOK</a></li> </ul> <div class="tab-content" id="tabs1">ALL</div> <div class="tab-content" id="tabs2">STDOUT</div> <div class="tab-content" id="tabs3">AI</div> <div class="tab-content" id="tabs4">CAMERA</div> <div class="tab-content" id="tabs5">PARTICLES</div> <div class="tab-content" id="tabs6">SCRIPT</div> <div class="tab-content" id="tabs7">ANIMATION</div> <div class="tab-content" id="tabs8">HAVOK</div> </div> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/chat/js/style.js"></script> <script src="http://stackoverflow.com/questions/14411696/chat-frontend.js"></script></body></html>\[/code\]JS:\[code\]$(document).ready(function() { $('.tabs a').click(function(){ switch_tabs($(this)); }); switch_tabs($('.defaulttab'));});function switch_tabs(obj){ $('.tab-content').hide(); $('.tabs a').removeClass("selected"); var id = obj.attr("rel"); $('#'+id).show(); obj.addClass("selected");}\[/code\]