怎么样实现左侧页面点击后右边页面显示内容

实现结果图片

前端页面的代码

<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>