Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/466.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript CSS转换在ASP.NET Web窗体中不起作用_Javascript_Html_Css_Asp.net_Css Transitions - Fatal编程技术网

Javascript CSS转换在ASP.NET Web窗体中不起作用

Javascript CSS转换在ASP.NET Web窗体中不起作用,javascript,html,css,asp.net,css-transitions,Javascript,Html,Css,Asp.net,Css Transitions,CSS3转换在HTML页面中可以正常工作,但在.aspx页面中则不行。有没有办法克服这个问题?我想在Web表单中使用该应用程序,因为它使表单的设计更加容易。如有任何意见,将不胜感激 以下是.aspx页面: <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CMSWebForms.Index

CSS3转换在HTML页面中可以正常工作,但在.aspx页面中则不行。有没有办法克服这个问题?我想在Web表单中使用该应用程序,因为它使表单的设计更加容易。如有任何意见,将不胜感激

以下是.aspx页面:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CMSWebForms.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!DOCTYPE html>    
<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="Content/jquery-1.10.2.min.js" />  
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-combined.min.css" rel="stylesheet" />  
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="Content/test.css"/>


</head>
<body>
    <ul id="sidebar" class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu" style="display: block;  position: fixed; top: 0; left: 0;">
        <li><h1 class="text-center"><a tabindex="-1" href="#">CMS</a></h1></li>
        <li class="divider"></li>
        <li class="dropdown-submenu pull-right">
            <a tabindex="-1" href="#" id="myId">Sales</a>
            <ul class="dropdown-menu text-right">
                <li><a tabindex="-1" href="#">Customers</a></li>
                <li class="dropdown-submenu pull-right">
                    <a tabindex="-1" href="#" id="myId">Pricing</a>
                    <ul class="dropdown-menu text-center">
                        <li><a tabindex="-1" href="#">A</a></li>
                        <li><a tabindex="-1" href="#">B</a></li>
                        <li><a tabindex="-1" href="#">C</a></li>
                        <li><a tabindex="-1" href="#">D</a></li>
                        <li><a tabindex="-1" href="#">E</a></li>
                    </ul>
                </li>
                <li><a tabindex="-1" href="#">Quotes</a></li>
                <li><a tabindex="-1" href="#">Orders</a></li>
                <li><a tabindex="-1" href="#">Pricing</a></li>
                <li><a tabindex="-1" href="#">Reports</a></li>
            </ul>
            </li>
        <p>&nbsp;</p>
        <!--<p>&nbsp;</p>-->
        <li class="dropdown-submenu pull-right">
            <a tabindex="-1" href="#" id="myId">Manufacturing</a>
            <ul class="dropdown-menu text-center">
                <li><a tabindex="-1" href="#">One</a></li>
                <li><a tabindex="-1" href="#">Two</a></li>
                <li><a tabindex="-1" href="#">Three</a></li>
                <li><a tabindex="-1" href="#">Four</a></li>
                <li><a tabindex="-1" href="#">Five</a></li>
            </ul>
        </li>
    </ul>
    <!--</div>-->
    <!--<div id="wrapper">-->
    <div id="page-content-wrapper">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <ul class="nav navbar-nav navbar-left">
                    <li>
                        <button id="sidebarToggle" class="btn btn-primary btn-lg">
                            <i class="fa fa-angle-left"></i>
                        </button>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#" class="btn btn-sm btn-info">
                         <i class="fa fa-sign-in"></i>&nbsp;&nbsp;Log in
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="content-header container-fluid text-center">
            <h1 id="home" class="">
                CMS
            </h1>
        </div>
        <div class="page-content inset container-fluid">
            <div class="row">
                <div class="jumbotron text-center">
                    <h1 class="">Hello Beautiful!</h1>
                    <p class="">

                    </p>
                    Name:
                    <asp:TextBox ID="TextBox1" runat="server" Width="248px"></asp:TextBox>
                    Address:
                     <asp:TextBox ID="TextBox2" runat="server" Width="248px"></asp:TextBox>
                </div>
            </div>
        </div>
        <div id="footer"  class="container-fluid">
            <div class="navbar navbar-inverse navbar-fixed-bottom">
                <h4 class="text-center text-primary">&copy;2016 Apiron Technologies, Inc.</h4>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <script src="Scripts/site.js"></script>
</body>
</html>
</asp:Content>
以下是JS:

 (function () {

    var $sidebarAndWrapper = $("#sidebar,#page-content-wrapper");
    var $icon = $("#sidebarToggle i.fa");

    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
            $icon.removeClass("fa-angle-left");
            $icon.addClass("fa-angle-right");
        }
        else {
            $icon.removeClass("fa-angle-right");
            $icon.addClass("fa-angle-left");
        }
    });


})();

你要在哪个浏览器上登记?尝试使用其他浏览器。 我曾经有过同样的问题。重置IIS站点修复了该问题。您还可以尝试为CSS添加前缀


干杯

您在哪个浏览器中登记?尝试使用其他浏览器。 我曾经有过同样的问题。重置IIS站点修复了该问题。您还可以尝试为CSS添加前缀


干杯

尝试先加载css文件,然后加载js文件。不确定这是否会起作用,但在某些地方,他们指的是先加载css,然后加载js
,这是什么?这就是加载js文件的方式吗?尝试先加载css文件,然后加载js文件是错误的。不确定这是否会起作用,但在某些地方,他们指的是先加载css,然后加载js
,这是什么?这就是加载js文件的方式吗?给CSS加前缀是错误的怎么做?供应商加前缀。使用这一个只是粘贴你的css,它会为你的前缀。你试过重置IIS站点吗?我正在使用Chrome。Chrome在HTML中工作。我认为问题在于toggleClass不起作用;它会切换一秒钟,但随后会返回原始页面。我想我需要在点击按钮时防止回发。如何添加CSS前缀?供应商前缀。使用这一个只是粘贴你的css,它会为你的前缀。你试过重置IIS站点吗?我正在使用Chrome。Chrome在HTML中工作。我认为问题在于toggleClass不起作用;它会切换一秒钟,但随后会返回原始页面。我想我需要在点击按钮时防止回发。
 (function () {

    var $sidebarAndWrapper = $("#sidebar,#page-content-wrapper");
    var $icon = $("#sidebarToggle i.fa");

    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
            $icon.removeClass("fa-angle-left");
            $icon.addClass("fa-angle-right");
        }
        else {
            $icon.removeClass("fa-angle-right");
            $icon.addClass("fa-angle-left");
        }
    });


})();