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

Question

我正在尝试制作一个选项卡式“表格”，但在使其显示信息时遇到问题。

  $(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()