Web前台-我想用JQuery实现页面导航（面包导航）

    大神们好，我想用JQuery实现面包导航，可是就是实现不了，下面是我的代码，麻烦大家看下，
    谢谢。

           <div class="panel-heading">
        <h4 class="panel-title">
          <a  class="head" data-toggle="collapse" data-     parent="#accordion"  href="#collapseOne" id="功能1">功能1</a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="title"> <a href="#" id="功能1.1">功能1.1</a>  </div>
            <div class="title"> <a href="#" id="功能1.2">功能1.2</a>  </div>
            <div class="title"> <a href="#" id="功能1.3">功能1.3</a>  </div>
          </div>
      </div>
      <center>

                <script>
$(document).ready(function(){
    $("a").click(function(){
    //alert($(this).attr("id"));   
    var obj1 = document.getElementById("id").innerHTML; 
});
});
$(document).ready(function(){
    $("a").click(function(){
    $("p").append("obj1");
});
});

我想实现的是：点击功能1，右边显示功能1.再点击功能1.1，右边接着显示功能1.1.

你dom结构不对。你的p对象在哪？一个事件能完成你搞2个干嘛。。

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
      <div class="panel-heading">
        <h4 class="panel-title">
          <a  class="head" data-toggle="collapse" data- parent="#accordion"  href="#collapseOne" id="功能1">功能1</a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="title"> <a href="#" id="功能1.1">功能1.1</a>  </div>
            <div class="title"> <a href="#" id="功能1.2">功能1.2</a>  </div>
            <div class="title"> <a href="#" id="功能1.3">功能1.3</a>  </div>
          </div>
      </div>
 <p></p>

                <script>
$(document).ready(function(){
    $("a").click(function(){
    var id=$(this).attr("id");
    var obj1 = document.getElementById(id).innerHTML; 
    $("p").append(obj1);
   });
});

</script>