Fatal编程技术网

Javascript Div选定状态

javascript css html

Javascript Div选定状态,javascript,css,html,state,selected,Javascript,Css,Html,State,Selected,大家好，stackoverflow， 我目前正在尝试制作一个具有“选定状态”功能的导航条。 我让它与JSFIDLE配合得很好，但是当我用它创建html时，选择的状态不知怎么地不起作用。 它与我在JSFIDLE中的内容几乎完全相同。 我试图将jquery作为一个文件嵌入，但也没有成功 我似乎不明白为什么它不起作用。。 请帮忙 <html> <head> <title>selected state test</title> <script s

大家好，stackoverflow， 我目前正在尝试制作一个具有“选定状态”功能的导航条。 我让它与JSFIDLE配合得很好，但是当我用它创建html时，选择的状态不知怎么地不起作用。 它与我在JSFIDLE中的内容几乎完全相同。 我试图将jquery作为一个文件嵌入，但也没有成功

我似乎不明白为什么它不起作用。。 请帮忙

<html>
<head>

<title>selected state test</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
    $('.menu_button').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected')
    })​
</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}​
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​

</body>
</html>
您必须加载jQuery代码，如下所示：

<script type="text/javascript">
$(document).ready(function() {
    $('.menu_button').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected')
    })
});
</script>
还有，可能是jQuery导入调用错误吗

试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
有关何时以及如何使用//而不是http://read的详细信息，请参阅

我已经尝试过你的代码，在那次更改后，它对我起了作用

你必须加载jQuery代码，如下所示：

<script type="text/javascript">
$(document).ready(function() {
    $('.menu_button').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected')
    })
});
</script>
还有，可能是jQuery导入调用错误吗

试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
有关何时以及如何使用//而不是http://read的详细信息，请参阅

我已经尝试过你的代码，在更改后它对我有效

尝试添加：

    $(document).ready{
        $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected')
        })​;
    }
尝试添加：

    $(document).ready{
        $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected')
        })​;
    }
如果您脱机工作，那么jQuery调用是错误的

用这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
如果您脱机工作，那么jQuery调用是错误的

用这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
您的src有问题：

// this directs to yourdomain.com/ajax....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

//Instead use one of the following
<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
您的src有问题：

// this directs to yourdomain.com/ajax....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

//Instead use one of the following
<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
使用此代码

<html>
<head>

<title>selected state test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {
    $(".menu_button").click(function(e) {
        $(this).addClass("selected").siblings().removeClass("selected");
    });
});

</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}​
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​

</body>
</html>
使用此代码

<html>
<head>

<title>selected state test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {
    $(".menu_button").click(function(e) {
        $(this).addClass("selected").siblings().removeClass("selected");
    });
});

</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}​
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>​

</body>
</html>
将脚本src中丢失的http:移动到此处或尝试脚本时是一个输入错误吗？@srject我忘了提及，但我也尝试了。在这里，你会看到他们不包括它。我认为这是因为没有http：您不仅可以使用http，还可以使用https。然后从中删除//表示使用与父级相同的协议。如果您在http中请求它，它将http用作请求，https也是这样。只是，较旧的浏览器不支持它。要稍微扩展一下，请使用双前导斜杠//is。这将工作良好，推荐！如果文件实际上是由服务器提供的，但如果按照浏览器的请求使用file://协议，则会失败：file://ajax.googleapis.com....was 脚本中缺少的http:src在将其移动到此处或尝试脚本时出现了一个输入错误？@srject我忘了提及，但我也尝试了。在这里，你会看到他们不包括它。我认为这是因为没有http：您不仅可以使用http，还可以使用https。然后从中删除//表示使用与父级相同的协议。如果您在http中请求它，它将http用作请求，https也是这样。只是，较旧的浏览器不支持它。要稍微扩展一下，请使用双前导斜杠//is。这将工作良好，推荐！如果文件实际上是由服务器提供的，但如果按照浏览器的请求使用file://协议，则会失败：file://ajax.googleapis.com....Works 就像一个符咒。谢谢！工作起来很有魅力。谢谢！