导致页面加载到标签内容而非指定内容中的jQuery标签

Question

下面是我的代码：

$(document).ready(function() {
	$("#admin-tabs").tabs();
});

#mogrify-admin {
	background: #eeeeee;
	width: 1000px;
	height: 800px;
}
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="mogrify-surveylist-welcome">
	<div id="mogrify-admin">
    	<h1>Welcome back, someone!</h1>
    
        <div id="admin-tabs">
        	<ul>
        		<li><a href="#tabs-home">Home</a></li>
        		<li><a href="#tabs-report-templates">Report Templates</a></li>
        		<li><a href="#tabs-statistics">Statistics</a></li>
        	</ul>
        	<div id="tabs-home">
        	</div>
        	<div id="tabs-report-templates">
        	</div>
        	<div id="tabs-statistics">
        	</div>
        </div>
    </div>
</div>

相同的代码在stackoverflow上也能很好地工作，但是从字面上复制和粘贴工作代码仍然会导致整个网页显示在tabcontent而不是指定的tabcontent中。