使用jQuery在页面加载时创建默认列表项

时间:2016-03-18 18:34:05

标签: jquery css

我意识到这可能已经得到了回答,但我是一名设计师,刚刚开始使用jQuery。我已经搜索了论坛,由于某种原因无法让它发挥作用。我需要列表中的第一个项目专注于页面加载,然后点击其他项目时没有重点。任何人都可以帮助一个文盲的javascript / jQuery编码器?

这是我的代码:

HTML

<ul class="menuleft">
    <li id="children"><a href="#">children</a></li>
    <li id="mascots"><a href="#">mascots</a></li>
    <li id="corporate"><a href="#">corporate</a></li>
    <li id="books"><a href="#">books</a></li>
</ul>

的jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $("#children").focus();
    });
</script>

CSS

.sidebar ul.menuleft a {
    display: inline;
    color: #89300e;
    text-decoration: none;
    padding: 0px 24px 4px 14px;
    font-size: 1.4em;
    text-shadow: 0px 0px 2px #3C352C;
    list-style-type: none;
    background-color: rgba(229,223,168,0.3);
    border: 1px solid #9F6B02;
    border-radius: 8px;
    box-shadow: 4px 4px 8px 3px rgba(69,40,2,0.5);
    -webkit-transition: all linear .1s .1s;
    transition: all linear .1s .1s;
}
.sidebar ul.menuleft li:last-child {
    margin-bottom: 0em;
}

.sidebar ul.menuleft a:hover, .sidebar ul.menuleft a:focus {
    color: #f4c874;
    text-shadow: 0px 0px 2px #f4c874;
    outline: 0;
    background-color: rgba(109,62,2,0.6);
    border: 1px solid #6a3a00;
}

1 个答案:

答案 0 :(得分:1)

您希望重点关注a标记,而不是li

$("#children a").focus();