从选项卡式选择中交换 div 信息？

Question

我正在尝试制作一个选项卡式 "table"，但我无法让它显示信息。

  $(document).ready(function() {
    $('#orenk ul a').click(function() {
      $('#orenk ul a').removeClass('selected');
      $(this).addClass('selected');
      $('#orenk_changer').html(
        ('.' + $(this).attr('id') + '_content').html()
      );
    });
  });

 body,
 html,
 div,
 ul,
 li,
 a {
   margin: 0;
   padding: 0;
 }
 body {
   font-family: arial;font-size:12px; color:#222;}
   .clear {
     clear: both;
   }
   a img {
     border: none;
   }
   ul {
     list-style: none;
     position: relative;
     z-index: 2;
     top: 1px;
     border-left: 1px solid #f5ab36;
   }
   ul li {
     float: left;
     width: 12.5%;
   }
   ul li a {
     background: #ffd89b;
     color: #222;
     display: block;
     padding: 6px 0px;
     text-decoration: none;
     border-right: 1px solid #f5ab36;
     border-top: 1px solid #f5ab36;
     border-right: 1px solid #f5ab36;
     text-align: center;
   }
   ul li a.selected {
     border-bottom: 1px solid #fff;
     color: #344385;
     background: #fff;
   }
   h1 {
     display: block;
     width: 600px;
     margin: 0 auto;
     padding: 20px 0;
     color: #fff;
   }
   #orenk {
     width: 900px;
     margin: 0 auto;
   }
   #tabs {
     width: 900px;
     margin: 0 auto;
   }
   #content {
     width: 900px;
     margin: 0 auto;
     height: 270px;
     background: #fff;
     z-index: 1;
     text-align: center;
     margin-bottom: 20px;
   }

<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
  ORENK PROVINCE
</div>
<div id="orenk">
  <ul>
    <li><a href="javascript:void(0);" id="province" class="selected province">ORENK PROVINCE</a>
    </li>
    <li><a href="javascript:void(0);" id="glass">Glass Shores</a>
    </li>
    <li><a href="javascript:void(0);" id="torrid">Torrid Terrain</a>
    </li>
    <li><a href="javascript:void(0);" id="plains">Muculent Plains</a>
    </li>
    <li><a href="javascript:void(0);" id="marsh">Ambrosial Marsh</a>
    </li>
    <li><a href="javascript:void(0);" id="expanse">Viscid Expanse</a>
    </li>
    <li><a href="javascript:void(0);" id="Opulent">Opulent Retreat</a>
    </li>
    <li><a href="javascript:void(0);" id="knolls">Reedy Knolls</a>
    </li>
  </ul>
  <div class="clear"></div>
</div>
<div id="content">
  <div id="orenk_changer">
    <img src="http://placehold.it/900x270">
  </div>
  <div id="glass_content" style="display: none;">Glass content test</div>
  <div id="torrid_content" style="display: none;">torrid content test</div>
  <div id="plains_content" style="display: none;">plains content test</div>
  <div id="marsh_content" style="display: none;">marsh content test</div>
  <div id="expanse_content" style="display: none;">expanse content test</div>
  <div id="Opulent_content" style="display: none;">opulent content test</div>
  <div id="knolls_content" style="display: none;">knolls content test</div>
</div>

我是 javascript 的新手，我可以让它在我想要内容的地方显示 ID，但是当我试图让它显示容器内的 html 时，我正在尝试打电话，它什么都不做。真是令人沮丧。有人愿意指出我做错了什么以及如何解决吗？

Answer 1

jsBin demo

你的 ('.' +

有两处错误

$('.' + ›缺少 $
$('#' + ›您需要定位 # (Id) 元素，而不是 .(class)

  $('#orenk ul a').click(function( evt ) {
    evt.preventDefault();
    $('#orenk ul a').removeClass('selected');
    $(this).addClass('selected');
    $('#orenk_changer').html(
      $('#'+ this.id +'_content').html() // missing $ and # instead of .
    );
  });

此外，a href="#"（而不是 a href="javascript:void(0);"）就足够了，如果你在 JS 中做 Event.preventDefault()

从选项卡式选择中交换 div 信息？

Swap div information from tabbed selection?

javascript

swap