0

ページにいくつかの div があります。例を参照してくださいhttp://jsfiddle.net/AYRh6/26/ このコードを asp.net mvc3 プロジェクトに転送しようとすると、次のようになります。

<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script type="text/javascript">  
        $('.tab').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        })​;
    </script>
</head>
<body>
<div class="main">
        <div class="tab" style="float:right;">Tab 3</div>
        <div class="tab" style="float:right;">Tab 2</div>
        <div class="tab active" style="float:right;">Tab 1</div>
    </div>
</body>
</html>

CSS:

.main{
    width:325px;
}
div.tab {
    background: white;
    width: 100px;
    border: 1px solid grey;
    padding-left:5px;
}
div.tab.active {
    background: blue;
}
div.tab:hover {
    background: aqua;
}

ご覧のとおり、javascript は html ページのヘッダーにあります。それは私にはうまくいきません。onclick次のようなイベントにこのスクリプトを設定しようとしていました。

<div class="tab" style="float:right;" onclick="$(this).addClass('active').siblings().removeClass('active');">Tab 3</div>
            <div class="tab" style="float:right;" onclick="$(this).addClass('active').siblings().removeClass('active');">Tab 2</div>
            <div class="tab active" style="float:right;" onclick="$(this).addClass('active').siblings().removeClass('active');">Tab 1</div>

順調です！このスクリプトがヘッダーにある場合、何が間違っていますか?

4

2 に答える 2

4

Javascript コードはすぐに実行されますが、ハンドラーをアタッチする要素はまだ DOM に配置されていません。jQuery で.readyを使用するか、ドキュメントの最後にスクリプトを配置できます。

<script type="text/javascript">  
    $(document).ready(function(){
            $('.tab').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
        }
     })​;
</script>

デバッガーを使用してコードにブレークポイントを設定すると、要素の空の配列が返されることに$('.tab').click気付くでしょう。$('.tab')

于 2012-12-03T19:28:19.067 に答える
1

リンクを見ると、DOM Ready でスクリプトを実行するオプションを選択していることがわかります。あなたのウェブサイトでも同じことをしなければなりません。

jQuery(document).ready(function() {
    $('.tab').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    })​;

});
于 2012-12-03T19:28:30.053 に答える