Question

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

Answer 1

您必须加载jQuery代码only after the page is loaded，如下所示：

<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://阅读Is it valid to replace http:// with // in a ?

的详细信息

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

Answer 2

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

使用此

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

Answer 3

使用此代码

<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>

Answer 4

尝试添加：

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

Answer 5

你的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>

Answer 6

<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>

Div选择状态

6 个答案: