1

私のページでは、要素がホバーされたときに子要素が表示されるときに効果が欲しいです。コードの改善にご協力いただけますか?

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #list a { text-decoration: none; color: green; margin-right: 30px; }
        #content { margin-top: 30px; }
        #content a { text-decoration: none;margin-right: 10px; }
        #content span.first1 { display: none; }
        #content span.first1 { display: none; }
        .show { display: inline; } 
    </style>
    <script src="../jquery-1.10.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#list a').hover(function() {
                hover_hidden()
            })
            function hover_hidden() {
                var length = $('#first a').length
                var str = '

                for(i=0; i<length; i++)  {
                    if ( i == 0) 
                        $('.first').show() 
                else {
                    $('#list a').eq(i).hover(function() {
                        $('.first').hide()
                        var str = '.first'
                        i += ''
                        var newdetail = str + i
                     //   alert(newdetail)
                        $("newdetail").addClass('show')
                    })
                }
            }

            }
        }) 
    </script>
</head>
<body>
    <div id="list">
        <a href="#">first</a>
        <a href="#">second</a>
        <a href="#">three</a>
    </div>
    <div id="content">
        <span class="first">
            <a href="#">first</a>
            <a href="#">first</a>
            <a href="#">first</a>
        </span>
        <span class="first1">
            <a href="#">second</a>
            <a href="#">second</a>
            <a href="#">second</a>
        </span>
        <span class="first2">
            <a href="">three</a>
            <a href="">three</a>
            <a href="">three</a>
        </span>
    </div>
</body>
</html>

そして、私はここにコードを置きますhttp://jsfiddle.net/DVdAk/

4

2 に答える 2

3

試す

$(document).ready(function() {
    var $spans = $('#content > span')
    $('#list a').mouseenter(function() {
        var index = $(this).index();
        $spans.filter(':visible').hide();
        $spans.eq(index).show();
    })
})

デモ:フィドル

于 2013-07-25T03:27:29.463 に答える