jQuery在网页上不起作用?

时间:2014-08-02 11:37:50

标签: javascript jquery

我正在使用jQuery但它在我的网页中无效。 jquery-1.10.2.min.js用于TAB和jquery.lightbox-0.5.js"用于带有jquery.js脚本文件的照片库。 现在虽然它显示了标签按钮和图库的缩略图,但当我点击标签时,标签不起作用,照片库也不起作用。

    <script type="text/javascript" src="js/jquery-1.10.2.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">

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
        <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->


        <!-- Ativando o jQuery lightBox plugin -->
        <script type="text/javascript">
        $(function() {
            $('#photog a').lightBox();
        });
        </script>
        <style type="text/css">
        /* jQuery lightBox plugin - Gallery style */

    </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>
                                     <div class="cleaner_h10">&nbsp;</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">
          <h1>Assam</h1>



        </div><!-- @end  -->


        <div id="manipur-content" class="contabblock hidden">
          <h1>Manipur</h1>


        </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">
                            <li><a href="#"></a></li>
                            <li><a class="item-2" 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)

我真的不知道你的脚本是做什么的,但只是通过阅读它我看到了这个问题:

  var oldcontent = $('#sidemenu a.open').attr('href');
  var newcontent = $(this).attr('href');

所以oldcontentnewcontent是一串包含链接(URL)的字符串,如&#34; http://....."等。

然后你试图制作那些&#34;字符串&#34;褪色:

  $(oldcontent).fadeOut('fast', function(){
    $(newcontent).fadeIn().removeClass('hidden');
    $(oldcontent).addClass('hidden');
  });

我认为两者之间缺少某些东西......