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

回答

相關問題