CODEWITHSUNDEEP
jquery
sgsheg
sgsheg

Reputation: 154

jQuery to show the elements when a was hovered

In my page, I want to have an effect when an element is hovered the child elements are shown. Can you help to make the code better?

<!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>

And I put the code here http://jsfiddle.net/DVdAk/

Upvotes: 1

Views: 62

Answers (2)

Sean
Sean

Reputation: 3052

$(function(){
            $('#list a').hover(hoverHidden);
            function hoverHidden() {
                var $activeItem = $(this);
                var $subMenu = $('#'+$activeItem.data('toggle'));
                $subMenu.show();
                $subMenu.siblings().hide();

            }

});

http://jsfiddle.net/DVdAk/1/

try this in fiddle

this is not perfect, but I know you could make it out, the idea is to use data- attrabute to indicate the submanual to display

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Try

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

Demo: Fiddle

Upvotes: 3

Related Questions