Div 选定的状态

Div selected state

本文关键字：状态 Div      更新时间：2023-09-26

大家好@stackoverflow，我目前正在尝试制作一个具有"选定状态"功能的导航栏.
我让它很好地与 jsfiddle 配合使用，http://jsfiddle.net/uphem/U7NLM/但是当我从中创建 html 时，选定状态不知何故不起作用。它几乎是我在jsfiddle.
中的精确副本我尝试将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://的更多信息，请阅读在 中将 http://替换为//是否有效？

我试过你的代码，在那次更改后它对我有用

如果你正在离线工作，你的jQuery调用是错误的。

使用这个

<script src="http://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>

尝试添加：

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

这是你的 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>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>selected state test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('.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>
相关文章：