积分系统(7)-选项卡效果替换跳转网页显示

在优化添加公告的时候有这样一个问题，每次点击添加公告都会直接打开一个新的网页，这样体验不好，效果更不啊后，于是就想着直接把这个页面放到选项卡里面，关于具体的代码如下，代码备注里面有具体优化了哪些。

JS代码：

//为设置公告添加选项卡效果，替换掉网页显示-张婷-2017年6月13日
function ShowAnnounce() {
if ($("#tabs").tabs("exists", '设置公告')) {
$("#tabs").tabs("select", '设置公告');
} else {
$('#tabs').tabs('add', {
title: '设置公告',
href: '/AnnounceShow/Index',
closable: true,
fit: true
});
}
}
//为添加公告设置选项卡效果，替换掉页面显示-张婷-2017年6月13日
function AddAnnounce() {
if ($("#tabs").tabs("exists", '添加公告')) {
$("#tabs").tabs("select", '添加公告');
} else {
$('#tabs').tabs('add', {
title: '添加公告',
href: '/AddAnnounce/Index',
closable: true,
fit: true
});
}
}

Views层代码：

<center class="content">

<div class="col-lg-2 col-xs-5">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<center>
<h3>工具</h3>
<p>工具部门编辑区</p>
</center>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#"onclick="ShowAnnounce()" class="small-box-footer">查看 <i class="fa fa-arrow-circle-right"></i></a>
<a href="#"onclick="AddAnnounce()" class="small-box-footer">添加 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>

<!-- ./col -->
<div class="col-lg-2 col-xs-5">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<center>
<h3>博客</h3>
<p>博客部门编辑区</p>
</center>
</div>

<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>

<a href="#"onclick="ShowAnnounce()" class="small-box-footer">查看 <i class="fa fa-arrow-circle-right"></i></a>

<a href="#"onclick="AddAnnounce()" class="small-box-footer">添加 <i class="fa fa-arrow-circle-right"></i></a>

</div>
</div>

<!-- ./col -->
<div class="col-lg-2 col-xs-5">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<center>
<h3>学术</h3>
<p>学术部门编辑区</p>
</center>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#"onclick="ShowAnnounce()" class="small-box-footer">查看 <i class="fa fa-arrow-circle-right"></i></a>
<a href="#"onclick="AddAnnounce()" class="small-box-footer">添加 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>

<!-- ./col -->
<div class="col-lg-2 col-xs-5">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<center>
<h3>英语</h3>
<p>英语部门编辑区</p>
</center>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#"onclick="ShowAnnounce()" class="small-box-footer">查看 <i class="fa fa-arrow-circle-right"></i></a>
<a href="#"onclick="AddAnnounce()" class="small-box-footer">添加 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</center>

拖拽过来的JS语句：

<script src="~/Content/JS/AnnounceShow/AnnounceShow.js"></script>

在把 JS写好之后 直接拖到 View 层的最上边就好，这样一来选项卡效果就出来了；