Div选择状态

嗨，人们@stackoverflow，我目前正在试图做一个导航栏的'selected-state'功能。
我得到它与jsfiddle，http://jsfiddle.net/uphem/U7NLM/很好地工作，但选择状态以某种方式不起作用时，我创建一个HTML。这几乎是我在jsfiddle中所做的精确副本。
我试图嵌入jquery作为一个文件，并没有工作。Div选择状态

我似乎无法弄清楚为什么它不起作用..
请帮忙！

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

来源

2012-08-15 davidgogh

是缺少 “HTTP”在此处移动时出现错字还是尝试脚本时出现错字？ – SReject 2012-08-15 14:39:21

@拒绝我忘了提，但我也尝试过。 https://developers.google.com/speed/libraries/devguide#jquery在这里你会看到他们不包括它。我认为这是因为没有“http：”你不仅可以使用http，也可以使用https。 – davidgogh 2012-08-15 14:41:20

然后从中删除“//”） – SReject 2012-08-15 14:44:42

你必须加载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 ?

我试过你的代码，它是更改后为我工作

来源

2012-08-15 14:40:27 Kuf

工程就像一个魅力。非常感谢！ – davidgogh 2012-08-15 16:43:41

尝试加入：

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

来源

2012-08-15 14:43:30

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

使用此

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

来源

2012-08-15 14:43:53 Enve

这是一个与你的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-15 14:46:09 SReject

使用此代码

<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-15 14:53:20 Enve

<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-15 14:54:28 Kamal

Div选择状态

回答

相关问题