2

大家好@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>
4

6 回答 6

2

您必须在页面加载后才加载 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://阅读的更多信息在 a 中将 http:// 替换为 // 是否有效？

我已经尝试过您的代码，并且在更改后它对我有用

于 2012-08-15T14:40:27.690 回答
1

如果您离线工作，您的 jQuery 调用是错误的。

用这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
于 2012-08-15T14:43:53.277 回答
1

使用此代码

<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>
于 2012-08-15T14:53:20.207 回答
0

尝试添加：

    $(document).ready{
        $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected')
        })​;
    }
于 2012-08-15T14:43:30.997 回答
0

这是您的 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>
于 2012-08-15T14:46:09.667 回答
0 
<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>
于 2012-08-15T14:54:28.467 回答