2016-11-10 22 views
0

誰でも助けてください。私はbootstrap.min.jsからbootstrap.jsへの切り替えを試みました。 jquery.min.jsからjquery.jsまでです。アニメーションは完璧に動作しますが、コントロールはクリック可能ではありません。 ASP.NET MVC5には問題がありますか?ブートストラップCarouselコントロールがクリック可能でなく、ASP.netで動作しないMVC 5

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Index - My ASP.NET Application</title> 
    <link rel="stylesheet" href="/Content/font-awsome/css/font-awesome.min.css"> 
    <!--<link rel="stylesheet" href="~/Content/bootstrap.min.css">--> 
    <link rel="stylesheet" href="/Content/bootstrap.css"> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <!--<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>--> 
    <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/CADF6E67-D04A-8F45-8DD6-5103EA07CB3E/main.js" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/E3BC70AE3015-6DD8-54F8-A40D-76E6FDAC/abn/main.css"/><script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery-1.10.2.intellisense.js"></script> 
    .min.css" rel="stylesheet" type="text/css" /> 
    <script> 
     var WindowsSize=function(){ 
      var h=$(window).height(), 
       w=$(window).width(); 
      $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>"); 
     }; 

     $(document).ready(function(){WindowsSize();}); 
     $(window).resize(function(){WindowsSize();}); 
    </script>  
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50" style="border:0px solid black; padding:0px; margin:0px;"> 
    <nav class="navbar navbar-fixed-top opaque-navbar" style="padding:0px; margin:0px;"> 
     <div class="container-fluid"> 
      <div class="navbar-header" style="padding:0px; margin:0px; display:inline-block; width:100%"> 
       <button id="menuBarButton" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" 
         style="border:0;margin-top:0px;background-color:#ffffff; outline:none"> 
        <span id="bar1" class="icon-bar" style="border:0; background-color:#17508d; height:3px; width:35px"></span> 
        <span id="bar2" class="icon-bar" style="border:0; background-color:#17508d; height:3px; width:35px"></span> 
        <span id="bar3" class="icon-bar" style="border:0; background-color:#17508d; height:3px; width:35px"></span> 
       </button> 
       <a class="navbar-brand" href="#" style="margin-top:0px; border:0; padding-top:6px; position:fixed"> 
        <img style="height:56px; margin-left:3px; padding-top:0px; image-resolution:snap; image-rendering:optimizeQuality" 
         src="/Content/Images/DcmpLogos/dcmpLogo12.png"/> 
       </a> 
       <div id="topest-menu-nav" style="float:right"> 
        <div class="social-links-ontop" style="display:inline-block; background-color:#17508d;padding-left:12px;"><a href="#"> 
         <span class="fa fa-facebook" style="font-size:20px"></span></a> 
        </div> 
        <div class="social-links-ontop" style="display:inline-block;background-color:#13cf33; padding-left:9px"><a href="#"> 
         <span class="fa fa-whatsapp" style="font-size:20px"></span></a> 
        </div> 
        <div class="social-links-ontop"style="display:inline-block; background-color:#2bccd7;padding-left:8px;"><a href="#"> 
         <span class="fa fa-twitter" style="font-size:20px"></span></a> 
        </div> 
        <div class="social-links-ontop" style="display:inline-block; background-color:#a91515;padding-left:7px;"> 
         <a href="#"> 
          <span class="fa fa-youtube-play" style="font-size:20px"></span> 
         </a> 
        </div> 
       </div> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <div class="section-menu"> 
        <ul class="nav navbar-nav" style="margin:0px;"> 
         <li><a href="#"><i class="fa fa-home" style="font-size:larger"></i> HOME</a></li> 
         <li> 
          <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="10" data-close-others="false" 
           href="#">DEPARTMENTS & SERVICES</a> 
          <ul class="dropdown-menu" style="margin-top:3px; min-width:100%;border-radius:0px"> 
           <li><a href="#">DIRECTION</a></li> 
           <li><a href="#">SALES & PROCUREMENT</a></li> 
           <li><a href="#">QUALITY ASSURANCE</a></li> 
          </ul> 
         </li> 
         <li><a href="#">PRODUCTS</a></li> 
         <li><a href="#">PARTNERS</a></li> 
         <li><a href="#">NEWS</a></li> 
         <li><a href="#">ABOUT US</a></li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li style="padding-right:10px; padding-left:10px;"> 
          <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="10" data-close-others="false" 
           href="#"><span class="fa fa-globe" style="font-size:20px; font-weight:normal"></span> Switch Language</a> 
          <ul class="dropdown-menu" style="min-width:100%; margin-top:3px; border-radius:0px"> 
           <li><a href="#"><span class="lang-sm" lang="en"></span> ENGLISH</a></li> 
           <li><a href="#"><span class="lang-sm" lang="fr"></span> FRANCAIS</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </nav> 
    <!--<section class="banner"> 
     <div class="container"> 
      <div class="row"> 
       <h1>Transparent Background Example</h1> 
      </div> 
     </div> 
    </section>--> 

    <div class="container-fluid" style="z-index:0;"> 



<div class="carousel slide" id="myCarousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li class="item1 active"></li> 
     <li class="item2" onclick="showitem2()"></li> 
     <li class="item3" id="item3Id"></li> 
     <li class="item4"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox" > 
     <div class="item active"> 
      <img src="/Content/Images/HomeCarousel/5821d1693.jpg"> 
      <div class="carousel-caption"> 
       <h2>...</h2> 
       <p>...</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="/Content/Images/HomeCarousel/5821d1693.jpg"> 
      <div class="carousel-caption"> 
       <h2>...</h2> 
       <p>...</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="/Content/Images/HomeCarousel/5821d1693.jpg"> 
      <div class="carousel-caption"> 
       <h2>Carousel 3</h2> 
       <p>...</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="/Content/Images/HomeCarousel/5821d1693.jpg"> 
      <div class="carousel-caption"> 
       <h2>...</h2> 
       <p>...</p> 
      </div> 
     </div> 
    </div> 
    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    <script> 
     $(document).ready(function() { 


      // Enable Carousel Animation 
      $('.carousel').carousel({ 
       interval: 2000 
      }); 
      // Enable Carousel Indicators 
      $('.item1').click(function() { 
       $('.carousel').carousel(0); 
      }); 
      $('.item2').click(function() { 
       $('carousel').carousel(1); 
      }); 
      $('item').click(function() { 
       $('carousel').carousel(2); 
      }); 
      $('.item4').click(function() { 
       $('.carousel').carousel(3); 
      }); 

      // Enable Carousel Controls 
      $('.left').click(function() { 
       $("#myCarousel").carousel("prev"); 
      }); 
      $('.right').click(function() { 
       $("#myCarousel").carousel("next"); 
      }); 
     }); 
    </script> 
</div> 
</body> 
</html> 
+1

http://stackoverflow.com/help/how-to-askのガイダンスを読んで実装した方が、より良い対応を見つけることができます。また、叫ばないでください。 – mjs

+0

叫ばないでください!!!礼儀正しくしてください。 –

+0

申し訳ありません!私は叫んでいたことを知らなかった... – NatGlo

答えて

0

ご迷惑をおかけして申し訳ありませんが、問題は非常に狂っていたためです。 私はついにこの問題を起こしました。プロパティを変更しました

.navbar-collapse {min-height:900px;色:透明;}

.cssファイルの私のドラフトで無意識のうちに、まだそのZインデックスは、カルーセルのデフォルトではより高くなります。だから、それは覆われていたので、カルーセルがクリック可能な方法はありません。 本当にありがとうございます!

関連する問題