使用JS显示和隐藏占用相同空间的多个div

Question

我知道这里有很多这些确切类型的问题，我已经检查了但是我仍然无法让我的工作。

当我点击锚时，它甚至不能进入console.log？

$('.panel').hide();
$('.show').click(function(event){
	console.log('test')
	event.preventDefault();
	$('.panel').hide();
	$('#section' + $(this).attr('id')).show();
});

.panel{
	display: none;
	position:absolute;
	border: solid teal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li> <a href="#" class="show" id="1">Customers order</a> </li>
  <ul>
	<li> <%= link_to "Purchased" %> </li>
	<li> <%= link_to "Cancelled" %> </li>
  </ul>
<li> <a href="#" class="show" id="2">Your Products</a></li>
  <ul>
	<li> <a href="#" class="show" id="3"> "Add products" </a> </li>
  </ul>
<li> <a href="#" class="show" id="4">My Messages </a> </li>
<ul>

<div class="col-md-7">
	<div id="section1" class="panel" >
	  <%= form_for @new_product, :url => vendors_path do |form| %>
	  <%= render partial: '/vendors/form', object: form %>
	  <%= form.submit "Submit" %>
	  <%  end%>
	</div>

	<div id="section2" class="panel">
	   panel2
	</div>

	<div id="section3" class="panel">
	   panel3
	</div>

	<div id="section4" class="panel">
	  panel4
	</div>
</div>

非常感谢任何帮助。

由于

Answer 1

我认为你错过了“;”在console.log（）之后 它可以阻止所有人。