Bootstrap carousel -控件不可点击，不能在ASP.net MVC 5中工作
Bootstrap Carousel-controls not clickable and not working in ASP.net MVC 5
有谁能帮忙吗?我试过从bootstrap.min.js切换到bootstrap.js;从jquery.min.js到jquery.js。动画工作完美，但没有控制是可点击或工作。这是ASP的问题吗?净MVC5吗?
<!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>
很抱歉打扰你，因为这个问题太疯狂了。我终于解决了问题。我已经改变了属性
。Navbar-collapse {min-height:900px;颜色:透明;}
在不知情的情况下出现在。css文件的草稿中，但它的z-index默认高于carousel的z-index。所以旋转木马不可能是可点击的，因为它被覆盖了……谢谢你的关心!
相关文章：
- 借助asp.net验证或java脚本对多个文本进行验证
- 将Javascript数组发送到控制器ASP.NET MVC
- ASP.NET通过单击JavaScript按钮触发c#事件
- 文本框不是从Javascript/Asp.net中的对话框中打印出来的
- 从javascript调用asp.net codebehind函数
- 使用javascript的Asp.net内容占位符
- 获取ASP.NET Ajax Timer状态
- ASP.NET网络摄像头显示
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 如何将乳胶配方奶粉图像保存到Asp.net中的文件夹中
- asp.net，包括iss上的javascript slow
- 选择不在GridView-ASP.NET中激发
- 什么'是在asp.net MVC中将本地化的resources.resx文件转换为javascript文件的有效
- 使用ASP.NET将谷歌地图添加到项目中，并从数据库中检索位置
- 有什么“;错误的”;将javascript放在asp.net表单上，而不是放在单独的文件中
- 将Javascript日期转换为ASP.NET日期格式
- C#asp.net mvc Set CheckBoxFor已检查的具有Model Value的属性
- 如何使用javascript vb.net asp.net关闭web表单
- 在Ext.net (ASP.NET)中上传完成事件
- 以编程方式滚动/移动到.net asp:listview控件中的一个项目
