在刷新页面时停止选项卡以移至原始文件

时间:2014-08-04 08:06:26

标签: javascript jquery

我正在使用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>&copy; 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>

1 个答案:

答案 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作为标签...