从选项卡选择中交换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演示

你的('.' + 有两点不对

• $('.' + ›缺失$
• $('#' + ›您需要针对# (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()