0

sを使った簡単なメニューがあります<ul>。要素の場所を変更し、スタイルをそのまま維持したいと思います（変更が発生した要素に属するcssを変更する必要があります）。ここに私のメニューがあります: http://jsfiddle.net/EPvGf/24/ コード、CSS:

ul#menu { margin:0; padding:0; list-style-type:none;text-align: center; }
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 10px; padding-right: 0px; padding-bottom: 5px;display: inline-block;}
ul#menu .current { border-bottom:4px solid #3d496a;}
ul#menu li:hover { border-bottom:4px solid #3d496a;}
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#menu li a:hover { color:#8895b8; border:none; }

HTML:

<ul id="menu">
    <li><a href="#" data-id="div1">Description</a></li>
    <li><a href="#" data-id="div2">Shipping and payment</a></li>
    <li><a href="#" data-id="div3">Returns</a></li>
    <li><a href="#" data-id="div4">Feedback</a></li>
</ul>

Jクエリ:

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    }).find('a:first').click();
});

私が変更しようとしているのは、HTML コードの非常に単純な変更<a>です<li>。

<ul id="menu">
    <a href="#" data-id="div1"><li>Description</li></a>
    <a href="#" data-id="div2"><li>Shipping and payment</li></a>
    <a href="#" data-id="div3"><li>Returns</li></a>
    <a href="#" data-id="div4"><li>Feedback</li></a>
</ul>

しかし、同じスタイルを維持してください..これが私が試したものですが、100％機能しません：http://jsfiddle.net/EPvGf/25/

ここに画像の説明を入力

ここに画像の説明を入力

4

2 に答える 2

1

あなたが探している動作は、有効な html で実現できると思います。

LI の直接の親は、UL、OL、または MENU 要素でなければなりません (参照: w3.org/TR/html-markup/li.html#li-context)。

HTML

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        // Unassign .current from all <li>s in the #menu
        $('#menu').find('a').removeClass('current')

        // Assign .current to clicked on <li>
        $(this).addClass('current');
    });
});

CSS

a:hover {
    color: #0000FF;
}
ul#menu {
    margin:10;
    padding-left:13px;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    display: inline;
    margin: 0;
}
ul#menu li a{
    display: inline-block;
    border-bottom:10px solid #efefef;
    margin-right: 15px;
    padding: 5px 10px 5px 10px;
    text-decoration:none;
    font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}
ul#menu li a.current {
    border-color: #3d496a;
}
ul#menu li a:hover {
    border-color: #3d496a;
}

http://jsfiddle.net/EPvGf/40/

于 2013-06-13T00:33:09.780 に答える