关于Jquery的一个小效果

全部代码如下：我想让在点击li的时候 li变个颜色，怎么那么难呢
大家帮我看看是什么原因 谢谢啦<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script language="javascript" src="jquery-1.4.1-vsdoc.js"></script>
<script language="javascript" type="text/javascript">
 $(function () {
        $('.bdlb li').click(function () {
 alert('11');
                $(this).css("background-color","red");
        })
    })
</script>
<style type="text/css">
<!--
@charset "utf-8";
.bdlb {
width: 100%;
height: 100%;
margin-top:20px;
margin-left: 20px;
margin-right: 20px;
}
* {
margin: 0px;
padding: 0px;
text-align: left;
}
.bdlb  li{
margin:5px;
display: block;
width: 160px;
height: 20px;
}
-->
</style>
</head><body>
<ul class="bdlb">
<fieldset style="width:160px;">
<legend>事务审批</legend>
<li><a href="table/YYD_table.html" target="mainFrame" >用印单</a></li>
<li><a href="table/message_table.html" target="mainFrame">短信申请</a> </li>
</fieldset></ul>
</body>
</html></body>
</html>

解决方案 »

  1.   

    css就这么简单，怎样才好看呢？
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
         $(function () {
            $('.bdlb li').mouseover(function () {
                    //alert('11');
                    $(this).css("background-color","red");
            }).mouseout(function(){
    $(this).css("background-color","");
    })
        })
    </script>
    <style type="text/css">
    <!--
    .bdlb {
        width: 100%;
        height: 100%;
        margin-top:20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    * {
        margin: 0px;
        padding: 0px;
        text-align: left;
    }
    .bdlb  li{
        margin:5px;
        display: block;
        width: 160px;
        height: 20px;
    }
    -->
    </style>
    </head><body>
    <ul class="bdlb">
    <fieldset style="width:160px;">
    <legend>事务审批</legend>
    <li><a href="table/YYD_table.html" target="mainFrame" >用印单</a></li>
    <li><a href="table/message_table.html" target="mainFrame">短信申请</a> </li>
    </fieldset></ul>
    </body>
    </html></body>
    </html>
      

  2.   

    我改了下编码，你改回utf就可以了。
      

  3.   

    你是实现被点击完之后面成红色吗?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
         $(function () {
            $('.bdlb li').click(function () {
                     //alert('11');
                    $(this).css("background-color","red");
            })
        })
    </script>
    <style type="text/css">
    <!--
    @charset "utf-8";
    .bdlb {
        width: 100%;
        height: 100%;
        margin-top:20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    * {
        margin: 0px;
        padding: 0px;
        text-align: left;
    }
    .bdlb  li{
        margin:5px;
        display: block;
        width: 160px;
        height: 20px;
    }
    -->
    </style>
    </head><body>
    <ul class="bdlb">
    <fieldset style="width:160px;">
    <legend>事务审批</legend>
    <li><a href="table/YYD_table.html" target="mainFrame" >用印单</a></li>
    <li><a href="table/message_table.html" target="mainFrame">短信申请</a> </li>
    </fieldset></ul>
    </body>
    </html></body>
    </html>
      

  4.   

    ul 里面嵌套 fieldset  - -！这样貌似不太好吧 我帮你稍微调整了一下
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="../jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(function () {
                $('.bdlb li').click(function () {
                    $(this).css("background-color", "red");
                })
            })
        </script>
        <style type="text/css">
            * { margin: 0px; padding: 0px; text-align: left; }
            .bdlb { width: 100%; height: 100%; }
            .bdlb li { margin-left: 5px; margin-top: 5px; margin-bottom: 5px; display: block; width: 150px; height: 20px; cursor: pointer; border: 1px solid black; }
            .bdlb li a { text-decoration: none; font-weight: bold; }
        </style>
    </head>
    <body>
        <fieldset style="width: 160px; margin-left: 20px;">
            <legend>事务审批</legend>
            <ul class="bdlb">
                <li><a href="table/YYD_table.html" target="mainFrame">用印单</a></li>
                <li><a href="table/message_table.html" target="mainFrame">短信申请</a> </li>
            </ul>
        </fieldset>
    </body>
    </html>
      

  5.   

    浏览器可以实现你要的点击完变red效果啊。
      

  6.   

    我就一悲剧啊，原来是JQUERy链接地址写错了。。浪费了一下午时间 擦