javascript - 在jquery中处理多个ID

Question

我有多个链接，我想在所有链接上都有相同的悬停效果，有什么简单的方法可以做到。我为一个 ID 编写了 Javascript，但我不想为所有链接编写。悬停时，链接文本应变为白色，背景颜色应变为红色。

CSS

ul {
list-style-type: none;
}
li {
    margin-bottom:5px;
    width:100px;

}
ul li a{
    text-decoration:none;
    color:black;    
}

HTML

<div style='padding:10px;border:2px solid red'>
<ul>
            <li id='llist'><a href='#' id='list'>List</a></li>
            <li id='lgroups'><a href='#' id='groups'>Groups</a></li>
            <li id='lprofile'><a href='#' id='profile'>Profile</a></li>
            <li id='linvitations'><a href='#' id='invitations'>Invitations</a></li>
        </ul>
        <h5 style='color: white'>PROJECTS</h5>
        <ul>
            <li id='lsummary'><a href='#' id='summary'>Summary</a></li>
            <li id='ltrack'><a href='#' id='track'>Track</a></li>
            <li id='lmanage'><a href='#' id='manage'>Manage</a></li>
            <li id='lexport'><a href='#' id='export'>Export</a></li>
        </ul>
        <h5 style='color: white'>ANALYSIS</h5>
        <ul>
            <li id='lanalyse'><a href='#' id='analyse'>Analyse</a></li>
            <li id='lviewall'><a href='#' id='viewall'>ViewAll</a></li>
            <li id='lexport'><a href='#' id='export'>Export</a></li>
        </ul>
        <h5 style='color: white'>SETTINGS</h5>
        <ul>
            <li id='lusers'><a href='#' id='users'>Users</a></li>
            <li id='larchive'><a href='#' id='archive'>Archive</a></li>
            <li id='lsystem'><a href='#' id='system'>System</a></li>
            <li id='lmyprofile'><a href='#' id='myprofile'>My Profile</a></li>
        </ul>
</div>

JS

$(document).ready(function(){
    $('#list').hover(
        function(){
            $(this).css('margin-left','10px');
            $(this).css('color','white');
            $('#llist').css('background-color','red');
        },function(){
            $(this).css('margin-left','0px'); 
            $(this).css('color','black');
            $('#llist').css('background-color','white');
        }

    );

});

注意： 在这里我给出了'a'标签，可能它会变得容易：悬停，a：链接等。还要记住写下答案，以便它适用于所有人。

score 2 · Accepted Answer

选择一个你喜欢的

HTML

<ul class="list_items">

为 ul 分配类list_items

js

$(document).ready(function(){
    $('.list_items li a').hover(
        function(){
            $(this).css('margin-left','10px');
            $(this).css('color','white');
            $(this).css('background-color','red');
        },function(){
            $(this).css('margin-left','0px'); 
            $(this).css('color','black');
            $(this).css('background-color','white');
        }
    );
});

更新了演示

用js更好的方法

$(document).ready(function () {
    $('.list_items li a').hover(

    function () {
        var x = $(this).parent('li');
        x.css({
            'margin-left': '10px',
                'color': 'white',
                'background-color': 'red'
        });
    },

    function () {
        var x = $(this).parent('li');
        x.css({
            'margin-left': '0px',
                'color': 'black',
                'background-color': 'white'
        });
    });
});

更好的方法与类

演示

js

$(document).ready(function () {
    $('.list_items li').hover(

    function () {
        $(this).addClass('active');
    },

    function () {
        $(this).removeClass('active');
    });
});

css

.active {
    margin-left:10px;
    color:white;
    background-color:red;
}

或者只是 CSS 方法

演示

ul.list_items li:hover {
    margin-left:10px;
    color:white;
    background-color:red;
}

score 0 · Accepted Answer

纯 CSS 解决方案：

http://jsfiddle.net/sGfxV/18/

ul {
    list-style-type: none;
}

ul li {
    margin-bottom:5px;
    width:100px;
    background-color: white;
}

ul li a {
    text-decoration:none;
    color:black;    
    margin-left: 0px;
}

ul li:hover {
    background-color: red;
}

ul li:hover a {
    margin-left: 10px;
    color: white;
}

/* transitions for fun */
ul li,
ul li a {
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

score 0 · Accepted Answer

为每个 id 添加一个公共字符串并在其上捕获悬停事件。例如，常见的字符串是“MyLink”，下面的代码是在其上捕获事件。在代码中进行如下更改：

        <li id='llist_MyLink'><a href='#' id='list'>List</a></li>
        <li id='lgroups_MyLink'><a href='#' id='groups'>Groups</a></li>
        <li id='lprofile_MyLink'><a href='#' id='profile'>Profile</a></li>

    $('[id*="MyLink"]').hover(
        function(){
            $(this).css('margin-left','10px');
            $(this).css('color','white');
            $(this).css('background-color','red');
        },function(){
            $(this).css('margin-left','0px'); 
            $(this).css('color','black');
            $(this).css('background-color','white');

        }

    );

score 0 · Accepted Answer

您可以通过纯 css 轻松实现这一点（不需要 jquery 或 javascript）在这里我提供了一个解决方案，在您的代码中进行了一些修改检查下面的代码或检查这个小提琴 http://jsfiddle.net/sarfarazdesigner/sGfxV/19 /

CSS 代码

ul {
list-style-type: none;
}
li {
    margin-bottom:5px;
    width:100px;

}
ul li a{
    text-decoration:none;
    color:black;
    display:block;
    padding:0 0 0 10px;
}
.menu li a:hover{ color:#fff; background:red;}

HTML 代码

<div style='padding:10px;border:2px solid red'>
    <ul class="menu">
        <li><a href='#' id='list'>List</a></li>
        <li><a href='#' id='groups'>Groups</a></li>
        <li><a href='#' id='profile'>Profile</a></li>
        <li><a href='#' id='invitations'>Invitations</a></li>
    </ul>
        <h5 style='color: white'>PROJECTS</h5>
    <ul class="menu">
        <li><a href='#' id='summary'>Summary</a></li>
        <li><a href='#' id='track'>Track</a></li>
        <li><a href='#' id='manage'>Manage</a></li>
        <li><a href='#' id='export'>Export</a></li>
    </ul>
        <h5 style='color: white'>ANALYSIS</h5>
    <ul class="menu">
        <li id='lanalyse'><a href='#' id='analyse'>Analyse</a></li>
        <li id='lviewall'><a href='#' id='viewall'>ViewAll</a></li>
        <li id='lexport'><a href='#' id='export'>Export</a></li>
    </ul>
        <h5 style='color: white'>SETTINGS</h5>
    <ul class="menu">
        <li><a href='#' id='users'>Users</a></li>
        <li><a href='#' id='archive'>Archive</a></li>
        <li><a href='#' id='system'>System</a></li>
        <li><a href='#' id='myprofile'>My Profile</a></li>
    </ul>
</div>

javascript - 在jquery中处理多个ID

4 回答 4

Related

Reference