Javascript在服务器上不工作_Javascript_Css_Html_Tabbed Interface

Javascript在服务器上不工作

javascript css html

Javascript在服务器上不工作,javascript,css,html,tabbed-interface,Javascript,Css,Html,Tabbed Interface,我真的希望这不是一个重复的问题，因为这似乎是一个大问题，但我已经搜索了很长一段时间，现在没有用。。。我制作了一个HTML5选项卡式界面，它调用一个.js文件来实现功能。这个项目在我的本地计算机上运行得非常好，但是当我将它移动到我们正在使用的服务器上时，就没有更多的功能了。服务器是SQLServer2008，我在VisualStudio2010中开发了这个项目。尽管项目仍在进行中，但我只想让这些选项卡像在本地计算机上一样工作。这里有一些代码 Home.htm <!DOCTYPE html&g

我真的希望这不是一个重复的问题，因为这似乎是一个大问题，但我已经搜索了很长一段时间，现在没有用。。。我制作了一个HTML5选项卡式界面，它调用一个.js文件来实现功能。这个项目在我的本地计算机上运行得非常好，但是当我将它移动到我们正在使用的服务器上时，就没有更多的功能了。服务器是SQLServer2008，我在VisualStudio2010中开发了这个项目。尽管项目仍在进行中，但我只想让这些选项卡像在本地计算机上一样工作。这里有一些代码

Home.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabbed Interface</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="tabContainer">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Home</li>
        <li id="tabHeader_2">New Case</li>
        <li id="tabHeader_3">Search</li>
        <li id="tabHeader_4">Reports</li>
        <li id="tabHeader_5">Administration</li>
      </ul>
    </div>
    <div class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Home</h2>
        <p>Some Content</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <div id="wrapper2">
            <div id="newCaseTabContainer">
                <div class="newCaseTabs">
                    <ul>
                        <li id="tabHeader_6">Customer Information</li>
                        <li id="tabHeader_7">Incident Information</li>
                        <li id="tabHeader_8">Operator Information</li>
                        <li id="tabHeader_9">Incident Analysis</li>
                        <li id="tabHeader_10">Audit Log</li>
                    </ul>
                </div>
                <div class="newCaseTabContent">
                    <div class="tabpage" id="tabpage_6">
                        <h2>Customer</h2>
                    </div>
                    <div class="tabpage" id="tabpage_7">
                        <h2>Incident</h2>
                    </div>
                    <div class="tabpage" id="tabpage_8">
                        <h2>Operator</h2>
                    </div>
                    <div class="tabpage" id="tabpage_9">
                        <h2>Analysis</h2>
                    </div>
                    <div class="tabpage" id="tabpage_10">
                        <h2>Audit</h2>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Search</h2>
        <p>CONTENT GALORE!!</p>
      </div>
      <div class="tabpage" id="tabpage_4">
        <h2>Reports</h2>
        <p>WOOO</p>
      </div>
      <div class="tabpage" id="tabpage_5">
        <h2>Administration</h2>
        <p>YEAH!!!!!!</p>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="Scripts/Script.js"></script>
</body>
</html>

这可能是一个新手的错误，但我真的需要一些极端的帮助与此。。。先谢谢你

编辑请注意，.css和.js文件位于我的项目中各自的文件夹中，这就是为什么它声明了Style/Style.css和Scripts/Script.js

重要更新：好的，我发现我的浏览器中的兼容模式是打开的，然后当我关闭它时，应用程序可以完美地工作！！就像我本地机器上的一样。我不认为或不知道这是否是这个问题的解决方案，因为它只在我的机器上工作，可能不会在其他机器上工作，因为任何使用此应用程序的人都必须单独关闭该设置。。。我怎样才能让我的用户不必这么做？是否有一些代码可以输入，以便每个人都可以像预期的那样查看它？？？

您确定文件已上载到子目录。。。可能是没有创建目录，然后上载失败。通过在浏览器中键入js文件的url进行检查

如果这样做有效（您可以通过键入URL来获取js），那么将HTML中的URL更改为包含域名的完整URL路径。这将使您走上正确的道路。

根据您最近的帖子编辑，我认为这是一个IE兼容性问题

这将使IE使用最新的渲染模式（即最佳HTML5兼容性）：

（您必须将其放入html文档的

标题中

）

将其放入，它似乎可以工作。如果您在网络选项卡上查看浏览器开发工具，是否加载Script.js？确实如此。检查浏览器的控制台日志时，您会看到哪些错误？另外：此问题与SQL Server无关。如果您的js文件版本无效，请尝试清空缓存？是否确实已将文件上载到子目录。。。可能是没有创建目录，然后上载失败。在浏览器中键入js文件的url进行检查。该选项卡中没有任何内容。。此外，在脚本选项卡中，它并没有真正显示任何javascript，只是显示html，但我对开发工具也不太熟悉…我在目录中有文件，当我键入js文件的URL时，我得到“窗口未定义”，“Microsoft JScript运行时错误”。。。那是什么意思？啊哈！！！天哪，这起作用了。。。哇！我真的要揍我的公司了。太谢谢你了，伙计！！我想那是一个有点新的错误。一定要记住，下一次当兼容性问题打到我脸上时，那只是IE特有的。顺便说一句，对于网站开发，您可能还希望查看不同的浏览器（至少在其中测试您的网站）。

window.onload = function () {

    // get tab containers
    var container = document.getElementById("tabContainer");
    var check = document.getElementById("newCaseTabContainer");

    // set current tab
    // also set the new case tab when new case tab is selected
    var navitem = container.querySelector(".tabs ul li");
    var checkitem = check.querySelector(".newCaseTabs ul li");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current", ident);
    var checkident = checkitem.id.split("_")[1];
    checkitem.parentNode.setAttribute("data-current", checkident);

    //set current tabs with class of activetabheader
    navitem.setAttribute("class", "tabActiveHeader");
    checkitem.setAttribute("class", "tabActiveHeader");

    //get new case tab element to display tab control within
    var displayNewCaseTabs = document.getElementById("tabHeader_2");

    //hide other tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
        pages[i].style.display = "none";
    }
    var newCasePages = check.querySelectorAll(".tabpage");
    for (var i = 1; i < newCasePages.length; i++) {
        newCasePages[i].style.display = "none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = displayPage;
    }
    var newCaseTabs = check.querySelectorAll(".newCaseTabs ul li");
    for (var i = 0; i < newCaseTabs.length; i++) {
        newCaseTabs[i].onclick = displayPage;
    }
}

// on click of one of tabs
function displayPage() {

    var current = this.parentNode.getAttribute("data-current");

    //remove class of activetabheader and hide old contents
    document.getElementById("tabHeader_" + current).removeAttribute("class");
    document.getElementById("tabpage_" + current).style.display = "none";

    var ident = this.id.split("_")[1];

    //add class of activetabheader to new active tab and show contents
    this.setAttribute("class", "tabActiveHeader");
    document.getElementById("tabpage_" + ident).style.display = "block";
    this.parentNode.setAttribute("data-current", ident);
}

* 
{
    margin:0;
    padding:0;
}

body 
{
    width:75%;
    font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

h2
{ 
    margin-bottom:10px;
    margin-left:10px;
}

#wrapper
{
    width:720px;
    margin:40px auto 0;
}

#wrapper2
{
    width:720px;
    margin:40px 40px 0px 20px;
}

#wrapper h2
{
    color:Black;
    text-align:left;
    margin-bottom:20px;
}

#wrapper2 h2
{
    color:Black;
    text-align:left;
    margin: 10px 10px 25px 30px;
}

#wrapper a
{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#wrapper2 a
{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#tabContainer 
{
    width:75%;
    height:100%;
    position:absolute;
    padding:15px;
    background-color:#2e2e2e;
    -moz-border-radius: 4px;
    border-radius: 4px; 
}

#newCaseTabContainer
{
    width:75%;
    height:80%;
    position:absolute;
    padding:15px;
    border-radius: 2px;
}

.newCaseTabs
{
    height:30px;
}

.newCaseTabs > ul
{
    font-size:1em;
    list-style:none;
}

.newCaseTabs > ul > li
{
    margin-left:15px;
    padding:7px 10px;
    display:block;
    float:left;
    color:#333;
    border: 1px solid Black;
    border-bottom-width: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #E0E0E0; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.newCaseTabs > ul > li:hover
{
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

.newCaseTabs > ul > li.tabActiveHeader
{
    background: #FF0000; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #FFF;
}

.tabs
{
    height:30px;
}

.tabs > ul
{
    font-size: 1em;
    list-style:none;
}

.tabs > ul > li
{
    margin:0 2px 0 0;
    margin-left:10px;
    padding:7px 10px;
    display:block;
    float:left;
    color:#333;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid Black;
    border-bottom-width: 0px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #E0E0E0; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.tabs > ul > li:hover
{
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

.tabs > ul > li.tabActiveHeader
{
    background: #0000FF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #FFF;
}

.tabscontent 
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; 
    padding:10px 10px 25px;
    height:90%;
    background: #E8E8E8; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
    margin:0;
    color:#333;
}

.newCaseTabContent
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border: 2px solid;
    border-top-width: 1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #CCCCCC; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
}

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />