如何在jQuery中单击不同的按钮时显示不同的内容

Question

我想要达到的目的是：当用户点击不同的链接时，带有内容的容器会在主容器中显示它。我只是希望容器改变，而其他链接隐藏内容。

这是我的代码：

 <!-- This is the container, where it displays -->

   <div id="container" style="width:1200px;height:400px;">

    <div class="add hide" ><?php include_once('add_device.php');?></div>
    <div class="online hide" style="display:none;"><?php include_once('online_device.php');?></div>
    <div class="offline hide" style="display:none;"><?php include_once('offline_device.php');?></div>
    <div class="tampered hide" style="display:none;"></div>
    <div class="speed hide" style="display:none;"></div>
    <div class="realtime hide" style="display:none;"></div>
    <div class="offgeo hide" style="display:none;"></div>
    <div class="ongeo hide" style="display:none;"></div>
    <div class="crash hide" style="display:none;"></div>
    <div class="stats hide" style="display:none;"></div>

           </div>

  <!--The javascript functions that control the container div class-->

   <script>
    $("#devs a").click( function() {
$(".hide").hide(); // hide other divs, marked with hide class
var c = $(this).attr('class').split(' ')[0]; //Get First Class
$("#container ."+c).show(); //show anything inside content div with    the    class c (marked with a . to represent class)
  });
   </script>

      <!--The links that -->

     <ul class="collapse" id="devs">

        <li ><a href="#" class="add" ><i class="icon-plus" ></i> Add device </a></li> 
      <li ><a href="#" class="online" ><i class="icon-circle-blank"></i> Online </a></li>
          <li ><a href="#" class="offline"><i class="icon-circle"></i> Offline </a></li>
          </ul>