我正在使用CSS标签，我要在其中查看不同的数据。但每当我刷新页面时，标签会自动移动到第一个标签。
有没有办法阻止标签自动移动到第一个标签。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/vtab.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.opacityrollover.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="row-2">
<div class="main">
<div class="container_12">
<div class="grid_9">
<div id="logom">
<img src="images/logo-iie.png" width="43" height="54" alt="IIE LOGO" />
</div>
<h1>
<a class="logo" href="index.html">Indian Institute of Entrepreneurship</a>
<span>Clusters in North East Region</span>
</h1>
An Organisation of the Ministry Of Micro, Small and Medium Enterprises(MSME),<br>
Govt.of India
An ISO 9001:2008 Certified Organisation
</div>
<div id="logor"><img src="images/logo-rrc.png" width="51" height="54" alt="IIE LOGO" /></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row-1">
<div class="main">
<div class="container_12">
<div class="grid_12">
<!-- Main navigation -->
<nav class="main-navigation clearfix span12" role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="team.html">RRC Team</a></li>
<li>
<a href="clusters.html">Clusters</a>
<ul class="sub-menu">
<li><a href="#">Assam</a>
<ul class="sub-menu">
<li><a href="#">Sipajhar Handloom Cluster</a></li>
<li><a href="#">Dhamdhama Handloom Cluster</a></li>
<li><a href="#">Pyranga Eri Cluster</a></li>
<li><a href="#">Rontholi Jewellery Cluster</a></li>
<li><a href="#">Bogulamari Jute Cluster</a></li>
<li><a href="#">Asharikandi Terracotta Cluster</a></li>
<li><a href="#">Japi Cluster</a></li>
<li><a href="#">Incense Sticks cluster</a></li>
</ul>
</li>
<li><a href="#">Manipur</a>
<ul class="sub-menu">
<li><a href="#">Kouna Grass Cluster</a></li>
<li><a href="#">Imphal Handloom Cluster</a></li>
<li><a href="#">Greater Imphal Jewellery Cluster</a></li>
</ul>
</li>
<li><a href="#">Mizoram</a>
<ul class="sub-menu">
<li><a href="#">Baktwang Wood Carpentry Cluster</a></li>
<li><a href="#">Bairabi Bamboo cluster</a></li>
</ul>
</li>
<li><a href="#">Sikkim</a>
<ul class="sub-menu">
<li><a href="#">Okhrey Carpet Making Cluster</a></li>
</ul>
</li>
<li><a href="#">Tripura</a>
<ul class="sub-menu">
<li><a href="#">Hapania Jute Cluster</a></li>
</ul>
</li>
<li><a href="#">Meghalaya</a>
<ul class="sub-menu">
<li><a href="#">Strawberry Cluster, Ri-Bhoi</a></li>
<li><a href="#">Umden Eri Cluster</a></li>
<li><a href="#">Cashew Nut Cluster, Selsela</a></li>
</ul>
</li>
<li><a href="#">Arunachal Pradesh</a>
<ul class="sub-menu">
<li><a href="#">Tawang Carpet Making Cluster</a></li>
<li><a href="#">Dirang Food Processing Cluster</a></li>
</ul>
</li>
</ul>
</li>
<li class="current"><a href="gallery.html">Photo Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav> <!-- #main-navigation -->
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</header>
<!-- content -->
<section id="content">
<div class="bg-top">
<div class="bg-top-2">
<div class="bg">
<div class="bg-top-shadow">
<div class="main">
<div class="gallery p3">
<div class="wrapper indent-bot">
<span class="title img-indent3">Gallery</span><img src="images/gall-top.jpg" width="800" height="82"> <div class="cleaner_h10"></div>
<!--------------------------------------->
<div id="w" class="clearfix">
<ul id="sidemenu">
<li>
<a href="#assam-content" class="open"><i class="icon-info-sign icon-large"></i><strong>Assam</strong></a>
</li>
<li>
<a href="#manipur-content"><i class="icon-lightbulb icon-large"></i><strong>Manipur</strong></a>
</li>
<li>
<a href="#mizoram-content"><i class="icon-envelope icon-large"></i><strong>Mizoram</strong></a>
</li>
<li>
<a href="#sikkim-content"><i class="icon-envelope icon-large"></i><strong>Sikkim</strong></a>
</li>
<li>
<a href="#tripura-content"><i class="icon-envelope icon-large"></i><strong>Tripura</strong></a>
</li>
<li>
<a href="#meghalaya-content"><i class="icon-envelope icon-large"></i><strong>Meghalaya</strong></a>
</li>
<li>
<a href="#arunachal-content"><i class="icon-envelope icon-large"></i><strong>Arunachal</strong></a>
</li>
</ul>
<div id="contab">
<div id="assam-content" class="contabblock">
<span class="cluster">Photographs of Assam</span>
<!-- Asharikandi Cluster -->
<span class="cluster-name">Asharikandi Cluster</span>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-set" data-title="Asharikandi Cluster">
<img class="example-image" src="img/demopage/thumb-1.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-set" data-title="Asharikandi Cluster">
<img class="example-image" src="img/demopage/thumb-2.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Asharikandi Cluster">
<img class="example-image" src="img/demopage/thumb-3.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Asharikandi Cluster">
<img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="Asharikandi Cluster">
<img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Asharikandi Cluster">
<img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
</div>
</div>
<!-- Asharikandi Cluster -->
<!-- Pyranga Cluster -->
<div class="cleaner_h10"></div>
<span class="cluster-name">Pyranga Eri Cluster</span>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/pyranga-eri/image-1.jpg" data-lightbox="example-set" data-title="Pyranga Eri Cluster">
<img class="example-image" src="img/pyranga-eri/thumb-1.jpg" alt=""/></a>
<a class="example-image-link" href="img/pyranga-eri/image-2.jpg" data-lightbox="example-set" data-title="Pyranga Eri Cluster">
<img class="example-image" src="img/pyranga-eri/thumb-2.jpg" alt="" /></a>
<a class="example-image-link" href="img/pyranga-eri/image-3.jpg" data-lightbox="example-set" data-title="Pyranga Eri Cluster">
<img class="example-image" src="img/pyranga-eri/thumb-3.jpg" alt="" /></a>
<a class="example-image-link" href="img/pyranga-eri/image-4.jpg" data-lightbox="example-set" data-title="Pyranga Eri Cluster">
<img class="example-image" src="img/pyranga-eri/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/pyranga-eri/image-5.jpg" data-lightbox="example-set" data-title="Pyranga Eri Cluster">
<img class="example-image" src="img/pyranga-eri/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/pyranga-eri/image-6.jpg" data-lightbox="example-set" data-title="Pyranga Eri Cluster">
<img class="example-image" src="img/pyranga-eri/thumb-6.jpg" alt="" /></a>
</div>
</div>
<!-- Pyranga Cluster -->
<!-- Rontholi Jewellery Cluster -->
<div class="cleaner_h10"></div>
<span class="cluster-name">Rontholi Jewellery Cluster</span>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/rontholi-jewellery/image-1.jpg" data-lightbox="example-set" data-title="Rontholi Jewellery Cluster, Nagaon">
<img class="example-image" src="img/rontholi-jewellery/thumb-1.jpg" alt=""/></a>
<a class="example-image-link" href="img/rontholi-jewellery/image-2.jpg" data-lightbox="example-set" data-title="Rontholi Jewellery Cluster, Nagaon">
<img class="example-image" src="img/rontholi-jewellery/thumb-2.jpg" alt="" /></a>
<a class="example-image-link" href="img/rontholi-jewellery/image-3.jpg" data-lightbox="example-set" data-title="Rontholi Jewellery Cluster, Nagaon">
<img class="example-image" src="img/rontholi-jewellery/thumb-3.jpg" alt="" /></a>
<a class="example-image-link" href="img/rontholi-jewellery/image-4.jpg" data-lightbox="example-set" data-title="Rontholi Jewellery Cluster, Nagaon">
<img class="example-image" src="img/rontholi-jewellery/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/rontholi-jewellery/image-5.jpg" data-lightbox="example-set" data-title="Rontholi Jewellery Cluster, Nagaon">
<img class="example-image" src="img/rontholi-jewellery/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/rontholi-jewellery/image-6.jpg" data-lightbox="example-set" data-title="Rontholi Jewellery Cluster, Nagaon">
<img class="example-image" src="img/rontholi-jewellery/thumb-6.jpg" alt="" /></a>
</div>
</div>
<!-- Rontholi Jewellery Cluster -->
</div><!-- @end -->
<div id="manipur-content" class="contabblock hidden">
<span class="cluster">Photographs of Manipur</span>
<!-- Asharikandi Cluster -->
<span class="cluster-name">Greater Imphal Jewellery Cluster</span>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/imphal-jewellery/image-1.jpg" data-lightbox="example-set" data-title="Greater Imphal Jewellery Cluster">
<img class="example-image" src="img/imphal-jewellery/thumb-1.jpg" alt=""/></a>
<a class="example-image-link" href="img/imphal-jewellery/image-2.jpg" data-lightbox="example-set" data-title="Greater Imphal Jewellery Cluster">
<img class="example-image" src="img/imphal-jewellery/thumb-2.jpg" alt="" /></a>
<a class="example-image-link" href="img/imphal-jewellery/image-3.jpg" data-lightbox="example-set" data-title="Greater Imphal Jewellery Cluster">
<img class="example-image" src="img/imphal-jewellery/thumb-3.jpg" alt="" /></a>
<a class="example-image-link" href="img/imphal-jewellery/image-4.jpg" data-lightbox="example-set" data-title="Greater Imphal Jewellery Cluster">
<img class="example-image" src="img/imphal-jewellery/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/imphal-jewellery/image-5.jpg" data-lightbox="example-set" data-title="Greater Imphal Jewellery Cluster">
<img class="example-image" src="img/imphal-jewellery/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/imphal-jewellery/image-6.jpg" data-lightbox="example-set" data-title="Greater Imphal Jewellery Cluster">
<img class="example-image" src="img/imphal-jewellery/thumb-6.jpg" alt="" /></a>
</div>
</div>
<!-- Asharikandi Cluster -->
</div><!-- @end -->
<div id="mizoram-content" class="contabblock hidden">
<h1>Mizoram</h1>
</div><!-- @end -->
<div id="sikkim-content" class="contabblock hidden">
<h1>Sikkim</h1>
</div><!-- @end -->
<div id="tripura-content" class="contabblock hidden">
<h1>Tripura</h1>
</div><!-- @end -->
<div id="meghalaya-content" class="contabblock hidden">
<h1>MIzoram</h1>
</div><!-- @end -->
<div id="arunachal-content" class="contabblock hidden">
<h1>Arunachal Pradesh</h1>
</div><!-- @end -->
</div><!-- @end #content -->
</div><!-- @end #w -->
<!--------------------------------------->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper2">
<div class="grid_4">
<div>© 2014 All right reserved</div>
<!-- {%FOOTER_LINK} -->
</div>
<div class="grid_4">
<div>Powered by: Third Eye</div>
</div>
<div class="grid_4">
<ul class="list-services" style="float:right;">
<li><a class="item-3" href="#"></a></li>
<li><a class="item-4" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(function(){
$('#sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
我在我的一个项目中使用它来获得你想要的结果：
$(function() {
//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('click', function(e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(e.target).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('a[href="' + lastTab + '"]').click();
}
});
虽然我使用了bootstrap 3作为标签...