2012-08-15 77 views
1

嗨,人們@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> 
+0

是缺少 「HTTP」在此處移動時出現錯字還是嘗試腳本時出現錯字? – SReject 2012-08-15 14:39:21

+0

@拒絕我忘了提,但我也嘗試過。 https://developers.google.com/speed/libraries/devguide#jquery在這裏你會看到他們不包括它。我認爲這是因爲沒有「http:」你不僅可以使用http,也可以使用https。 – davidgogh 2012-08-15 14:41:20

+0

然後從中刪除「//」) – SReject 2012-08-15 14:44:42

回答

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 ?

我試過你的代碼,它是更改後爲我工作

+0

工程就像一個魅力。非常感謝! – davidgogh 2012-08-15 16:43:41

0

嘗試加入:

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

如果你正在離線工作,你的jQuery調用是錯誤的。

使用此

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
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> 
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> 
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>