我有一组在项目中继承的脚本，但由于我不是Javascript开发人员，因此遇到了一些问题。
我需要做的是抽象这个脚本，以便单个页面上的每个选项卡对象实际上不会相互影响，并且我不必添加脚本块来让另一个选项卡工作。具体看标签，没有别的。
我完全迷失了，甚至不知道从哪里开始，因为这个脚本实际上有一堆我真的不想搞砸的功能和方法。
任何正确方向的帮助或指针将不胜感激。
$(document).ready(function(){
//Go up
$('.footer-up-icon, .going-up').click(function() {
$('body,html').animate({
scrollTop:0
}, 800, 'easeOutExpo');
return false;
});
//Tabs
$('.tab-but-1').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-1').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-1').show(100);
return false;
});
$('.tab-but-2').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-2').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-2').show(100);
return false;
});
$('.tab-but-3').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-3').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-3').show(100);
return false;
});
$('.tab-but-4').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-4').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-4').show(100);
return false;
});
$('.tab-but-5').click(function(){
$('.tab-but').removeClass('tab-active');
$('.tab-but-5').addClass('tab-active');
$('.tab-content').hide(100);
$('.tab-content-5').show(100);
return false;
});
};
.HTML：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/GRD/images/splash/splash-icon.png" />
<link rel="apple-touch-startup-image" href="/GRD/images/splash/splash-screen.png" media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="/GRD/images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" sizes="640x1096" href="/GRD/images/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="/GRD/images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="/GRD/images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/GRD/images/splash/splash-screen-ipad-portrait-retina.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="/GRD/images/splash/splash-screen-ipad-landscape-retina.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"/>
<title>Get-Er-Done Team</title>
<link href="/GRD/styles/animate.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/colorbox.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/font-awesome.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/framework.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/owl.carousel.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/owl.theme.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/style.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/GRD/styles/swipebox.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/GRD/scripts/jquery.js"></script>
<script type="text/javascript" src="/GRD/scripts/jqueryui.js"></script>
<script type="text/javascript" src="/GRD/scripts/wow.js"></script>
<script type="text/javascript" src="/GRD/scripts/owl.carousel.min.js"></script>
<script type="text/javascript" src="/GRD/scripts/jquery.swipebox.js"></script>
<script type="text/javascript" src="/GRD/scripts/colorbox.js"></script>
<script type="text/javascript" src="/GRD/scripts/snap.js"></script>
<script type="text/javascript" src="/GRD/scripts/countdown.js"></script>
<script type="text/javascript" src="/GRD/scripts/contact.js"></script>
<script type="text/javascript" src="/GRD/scripts/custom.js"></script>
<script type="text/javascript" src="/GRD/scripts/framework.js"></script>
<script type="text/javascript" src="/GRD/scripts/framework.launcher.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script></head>
<body >
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="header">
<a class="deploy-navigation going-up" href="#">
<i class="fa fa-navicon"></i>
</a>
<a class="header-logo" href="#"><img src="/GRD/images/logo.png" alt="img"></a>
</div>
<div class="header-clear"></div>
<div class="page-navigation full-bottom">
<div class="nav-clear"></div>
<div class="nav-item">
<a href="index.html">
<i class="fa fa-home"></i>
Homepage
<i class="fa fa-angle-right"></i>
</a>
</div>
<div class="nav-item">
<a href="appointment">
<i class="fa fa-calendar"></i>
Schedule an Appointment
<i class="fa fa-angle-down"></i>
</a>
</div>
<div class = "nav-item">
<a class = "submenu-deploy" href = "#">
<i class = "fa fa-navicon"></i>
User Navigation
<i class = "fa fa-angle-down deploy-navigation-active"></i></a>
<div class = "submenu-items submenu-items-active">
<a href="/GRD/dashboard/customers"><i class="fa fa-users"></i>Customers<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/projects"><i class="fa fa-wrench"></i>Projects<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/invoices"><i class="fa fa-money"></i>Invoices<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/users"><i class="fa fa-users"></i>Users<i class="fa fa-circle"></i></a><a href="/GRD/dashboard/company"><i class="fa fa-building-o"></i>Company Info<i class="fa fa-circle"></i></a></div></div> <div class="nav-item">
<a class="submenu-deploy" href="#">
<i class="fa fa-camera"></i>
Gallery
<i class="fa fa-angle-down"></i>
</a>
<div class="submenu-items">
<a href="gallery-thumb.html"><i class="fa fa-th-large"></i>Thumb Gallery<i class="fa fa-angle-right"></i></a>
<a href="gallery-wide.html"><i class="fa fa-navicon"></i>Wide Gallery<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="nav-item">
<a class="submenu-deploy" href="#">
<i class="fa fa-picture-o"></i>
Portfolio
<i class="fa fa-angle-down"></i>
</a>
<div class="submenu-items">
<a href="portfolio-one.html"><i class="fa fa-list"></i>One Column<i class="fa fa-angle-right"></i></a>
<a href="portfolio-two.html"><i class="fa fa-th-large"></i>Two Columns<i class="fa fa-angle-right"></i></a>
<a href="portfolio-three.html"><i class="fa fa-th"></i>Three Columns<i class="fa fa-angle-right"></i></a>
<a href="portfolio-video.html"><i class="fa fa-video-camera"></i>Video Embeds<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="nav-item">
<a href="contact.html">
<i class="fa fa-envelope"></i>
Contact
<i class="fa fa-angle-right"></i>
</a>
</div>
<div class="nav-item">
<a href="#" class="close-navigation">
<i class="fa fa-times"></i>
Close
<i class="fa fa-angle-up"></i>
</a>
</div>
</div>
<div class="nav-clear"></div><div class="lia">Welcome Vikingblooded. <a href="/GRD/auth/logout">(Logout)</a></div>
<div class="content">
<div class="container">
<div class="dashcharts">
<div id="chartPrj" class="chartImg"></div>
<div id="chartInv" class="chartImg"></div>
<div id="chartTasks" class="chartImg"></div>
</div>
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">Projects by Status<em><strong></strong></em></a>
<div class="toggle-content">
<div class="tabs">
<a href="#" class="tab-but tab-but-1 tab-active">Estimate</a><a href="#" class="tab-but tab-but-2 ">In-Progress</a><a href="#" class="tab-but tab-but-3 ">In Review</a><a href="#" class="tab-but tab-but-4 ">Complete</a> </div>
<div class="tab-content tab-content-1">
</div><div class="tab-content tab-content-2">
</div><div class="tab-content tab-content-4">
</div> </div>
</div>
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">Tasks by Status<em><strong></strong></em></a>
<div class="toggle-content">
<div class="tabs">
<a href="#" class="tab-but tab-but-10 tab-active">Unassigned</a><a href="#" class="tab-but tab-but-11 ">Assigned</a><a href="#" class="tab-but tab-but-12 ">In-Progress</a><a href="#" class="tab-but tab-but-13 ">In-Review</a><a href="#" class="tab-but tab-but-14 ">Verified</a> </div>
<div class="tab-content tab-content-10">
</div><div class="tab-content tab-content-11">
</div><div class="tab-content tab-content-12">
</div><div class="tab-content tab-content-13">
</div><div class="tab-content tab-content-14">
</div> </div>
</div>
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">Invoices by Status<em><strong></strong></em></a>
<div class="toggle-content">
<div class="tabs">
<a href="#" class="tab-but tab-but-15 tab-active">Design</a><a href="#" class="tab-but tab-but-16 ">Submitted</a><a href="#" class="tab-but tab-but-17 ">Paid-In-Full</a><a href="#" class="tab-but tab-but-18 ">Paid-Partial</a><a href="#" class="tab-but tab-but-19 ">Overdue</a> </div>
<div class="tab-content tab-content-15">
</div><div class="tab-content tab-content-16">
</div><div class="tab-content tab-content-17">
</div><div class="tab-content tab-content-19">
</div> </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var prjData= google.visualization.arrayToDataTable([
['Status','Count'],
['Estimate',1],
['In-Progress',1],
['In Review',1],
['Complete',2],
]);
var options = {
legend: 'left',
title: 'Projects by Status',
is3D: true,
width: 350,
height: 200
};
var chart = new google.visualization.PieChart(document.getElementById('chartPrj'));
chart.draw(prjData, options);var invData= google.visualization.arrayToDataTable([
['Status','Count'],
['Design',2],
['Submitted',2],
['Paid-In-Full',1],
['Paid-Partial',2],
['Overdue',1],
]);
var options = {
legend: 'left',
title: 'Invoices by Status',
is3D: true,
width: 350,
height: 200
};
var chart = new google.visualization.PieChart(document.getElementById('chartInv'));
chart.draw(invData, options);var tasksData= google.visualization.arrayToDataTable([
['Status','Count'],
['Unassigned',5],
['Assigned',4],
['In-Progress',0],
['In-Review',5],
['Verified',9],
]);
var options = {
legend: 'left',
title: 'Tasks by Status',
is3D: true,
width: 350,
height: 200
};
var chart = new google.visualization.PieChart(document.getElementById('chartTasks'));
chart.draw(tasksData, options); }
</script>
</div>
</div><div class="content">
<div class="decoration"></div>
<div class="footer-section">
<p class="footer-text">
Copyright 2014.<br>
All rights reserved.
</p>
<div class="footer-icons">
<a href="#" class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
<a href="#" class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
<a href="#" class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
<a href="#" class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
</div>
</div>
</div></body>
</html>
.CSS：
.tabs div{
overflow:hidden!important;
}
.tabs a{
color:#343434;
text-transform:uppercase;
}
.tab-content{
overflow:hidden;
display:none;
}
.tab-content p{
margin-bottom:0px;
}
.tab-content-1{
display:block;
}
.tab-active{
background-color:#bee7cf!important;
}
.actve-green{
background-color:#67c68f!important;
}
.tab-but{
font-size:13px;
float:left;
background-color:#f9f9f9;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
}
.tab-content{
background-color:#eeeeee;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
除非您实际需要以不同的方式设置每个选项卡按钮的样式，否则没有理由为它们提供单独的编号类。在选项卡内容区域，相同的交易 - 如果您需要个人标识符来自动化，请使用id。
我会为每个按钮添加一个data-属性，标识它相关的内容编号。您可以检索它并在要显示的内容的 ID 选择器中使用它。
// hide our tab content
$('.tab-content').hide();
// except the first in each list
$('.tabs + .tab-content').show();
$('.tab-but').click(function(){
// remove the active class from buttons
$('.tab-but').removeClass('tab-active');
// other than this one
$(this).addClass('tab-active');
// hide tab content
$('.tab-content').hide(100);
// but reveal ours
$('#tab-content-' + $(this).data('tabid') ).show(100);
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<a href="#" class="tab-but tab-active" data-tabid="10">Unassigned</a>
<a href="#" class="tab-but" data-tabid="11">Assigned</a>
<a href="#" class="tab-but" data-tabid="12">In-Progress</a>
<a href="#" class="tab-but" data-tabid="13">In-Review</a>
<a href="#" class="tab-but" data-tabid="14">Verified</a>
</div>
<div class="tab-content" id="tab-content-10">10</div>
<div class="tab-content" id="tab-content-11">11</div>
<div class="tab-content" id="tab-content-12">12</div>
<div class="tab-content" id="tab-content-13">13</div>
<div class="tab-content" id="tab-content-14">14</div>