在div中div之一的列表中正确的jquery选择器是什么?

时间:2015-12-30 09:26:26

标签: javascript jquery html css

我正在尝试将JQuery用于HTML中唯一的一个ul列表。我无法弄清楚这个ul列表的正确JQuery选择器是什么。下面是我的HTML和Javascript代码。



$(document).ready(function(){
    //initial
    $('#content').load('content/index.php');
});
    //handle menu clicks 
    $('#Kevin li a').click(function(){
        alert("hi");
    });
});

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="bootstrap.min.css" rel= stylesheet>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="css/bootstrap.css"></script>
        <link rel="stylesheet" type="text/css" href="main_IEEE.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="jquery-1.11.3.min.js"></script> 
        <script src="bootstrap.min.js"></script>
        <script src="uci_website.js"></script>     
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class= "nav navbar-nav navbar-right" id="Kevin">
                        <li class = "active"><a href="#">Home</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Membership Application</a></li>
                        <li><a href="#">Sponsors</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="jumbotron">
                <div class="text">
                    <h1><a href="https://www.ieee.org/index.html"><img src="ieee_mb_white.png"></a></h1>
                        <p>UCIrvine Student Chapter</p>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span2">
                        <iframe src="https://docs.google.com/document/d/1asOLuwicpKd90KVlX6e9VrEpLGZk9DQ1LlItgblvEvA/pub?embedded=true" width="100%" height="600" frameborder="0" marginheight="0" marginwidth="0"></iframe>
                    </div>
                </div>
            </div>
        </div>       
    </body>
</html>
&#13;
&#13;
&#13;

对Jquery选择器进行属性的正确方法是什么?谢谢!

2 个答案:

答案 0 :(得分:2)

您关闭了第4行}); &#34;语法错误&#34;  更新你的jQuery函数,如下所示:

  $(document).ready(function(){
    //initial
    $('#content').load('content/index.php');
   //handle menu clicks 
    $('#Kevin li a').click(function(){
        alert("hi");
    });
});

答案 1 :(得分:0)

$(document).ready(function(){

    $('#Kevin li a').click(function(){
        alert("hi");
    });
});

我认为你必须直接使用它 如果它没有在id上工作,你试着使用class 等。

$(document).ready(function(){

    $('.kevin li a').click(function(){
        alert("hi");
    });
});

并在ul标签中使用class