怎麼樣實現左側頁面點擊後右邊頁面顯示內容

實現結果圖片

前端頁面的代碼

<div class="row">

<div class="col-md-2 ceterL">

<ul class="centerMenu cf ">

<li class="curr"><a href="aboutUs">關於咱們</a><i></i></li>

<li><a href="contactUs">聯繫咱們</a><i></i></li>

</ul>

</div>

<div class="col-md-10 ceterR">

   <div class="fb about-title yh detailsT">關於咱們</div>

                <div class="about-cont">

                  <p class="f12">好農易商城是天津濱海新區新興的一家集農產品、調料、衝飲、茗茶及化妝品等種類爲一體的大型購物網站，主打農產品聽從綠色、有機、天然，無公害，爲用戶提供放心食材，深受廣大用戶喜好。</p>

                  <p class="f12"><span class="fb f14">主營業務</span><br/>糧食、調料、化妝品、衝飲、零食、茗茶等。</p>

                  <p class="f12"><span class="fb f14">經營優點</span><br/>一、源頭採購，正品保證。<br/>二、一流倉儲，閃電配送。<br/>三、貨真價廉，讓利顧客。</p>

                </div>

 </div>

</div>

根據連接實現到controller的跳轉以及返回的頁面

    @RequestMapping(value = "aboutUs", method = RequestMethod.GET)

    public String aboutUs(Model model, HttpSession session, Device device) {

    UVO uvo=(UVO) session.getAttribute("UVO");

   if (uvo == null) {

  uvo = new UVO();

  session.setAttribute("UVO", uvo);

  }//用來設置當前session中的值

  GoodsForm goodsForm = new GoodsForm();

List<GoodsForm> commodityType = goodsService.getType();

goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());

model.addAttribute("goodsForm", goodsForm);//完成頁面中用到的menu的檢索

model.addAttribute("commodityType",commodityType);

CartForm cartForm=new CartForm();

cartForm.setGuestId(uvo.getGuestId());

cartForm.setStatus("未付款");

model.addAttribute("cartList", cartService.searchCartList(cartForm));//用來實如今頁面中顯示的購物車的沙青年宮品數

    if(device.isNormal()) {

    return "shop/aboutUs";

    } else {

    return "mobile/aboutUs";//返回的界面

    }

    }

    

    @RequestMapping(value = "contactUs", method = RequestMethod.GET)

    public String contactUs(Model model, HttpSession session, Device device) {

    UVO uvo=(UVO) session.getAttribute("UVO");

   if (uvo == null) {

  uvo = new UVO();

  session.setAttribute("UVO", uvo);

  }

   GoodsForm goodsForm = new GoodsForm();

  List<GoodsForm> commodityType = goodsService.getType();

  goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());

  model.addAttribute("goodsForm", goodsForm);

  model.addAttribute("commodityType",commodityType);

  CartForm cartForm=new CartForm();

cartForm.setGuestId(uvo.getGuestId());

cartForm.setStatus("未付款");

model.addAttribute("cartList", cartService.searchCartList(cartForm));

      if(device.isNormal()) {

    return "shop/contactUs";

    } else {

    return "mobile/contactUs";

    }‍//基本相似上面‍

    }

SQL文

<select id="selectCartList" parameterClass="cn.agriculture.web.form.CartForm"

resultClass="cn.agriculture.web.form.CartForm">

SELECT cart.cart_id as cartId,

cart.guest_id as guestId,

cart.count as count,

commodity.commodity_id as commodityId,

commodity.type as type,

supplier.supplier_name as supplierName,

brand.brand_name as brandName,

commodity.commodity_name as commodityName,

commodity.weight as weight,

commodity.is_gift as isGift,

commodity.specifications as specifications,

commodity.unit as unit,

commodity.benchmark_price as benchmarkPrice,

commodity.guide_price as guidePrice,

commodity.retail_price as retailPrice,

commodity.competition_level as competitionLevel,

commodity.note as note,

cart.update_time as updateTime,

cart.update_user as updateUser,

commodity.picture_id as pictureId

FROM cart, commodity, supplier, brand

WHERE cart.commodity_id = commodity.commodity_id

AND commodity.supplier_id = supplier.supplier_id

AND commodity.brand_id = brand.brand_id

AND cart.status = #status#

AND cart.guest_id = #guestId#

</select>