2

こんにちは@stackoverflow、私は現在、「選択状態」の機能を備えたナビゲーションバーを作成しようとしています。http://jsfiddle.net/uphem/U7NLM/
の jsfiddleでうまく動作するようになりましたが、これから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>

read//の代わりにいつ、どのように使用するかについての詳細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

それはあなたの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

追加してみてください：

    $(document).ready{
        $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected')
        })​;
    }
于 2012-08-15T14:43:30.997 に答える
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 に答える