如何实现jquery点击切换的效果？

悬赏园豆：10 [已解决问题] 解决于 2012-04-25 15:42

像这种点击左边的列表，比如click“消息”，“消息”的class变成当前样式，背景白色，而且右侧出现“消息”页面的具体内容。

要是点击“提醒”，就出现有几个提醒的相关信息，这个效果怎么做呢？

jQuery Web前端 Javascript

wanglan | 初学一级 | 园豆：156
提问于：2012-04-25 11:45

< >

最佳答案

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body,ul,li {
            margin: 0px;
            padding: 0px;
        }
        body {
            background-color: #EEE;
        }
        ul,li {
            list-style: none;
        }
        #main {
            height: 400px;
            margin: 10px;
            border: 1px solid #CCC;
            background-color: #FFF;
        }
        #left {
            height: 100%;
            float: left;
            width: 120px;
            background-color: #EEE;
            border-right: 1px solid #CCC;
        }
        #left ul {
        }
        #left li {
            padding: 10px;
            border-bottom: 1px solid #CCC;
        }
        #left li:hover {
            cursor: pointer;
        }
        #left li.currentTab {
            background-color: #FFF;
            margin-right:-1px;
        }
        #left li.currentTab:hover {
            cursor: default;
        }
        #right {
            padding: 10px;
            margin-left: 120px;
            position: absolute;
        }
        .clear {
            clear: both;
        }
        #one,#two,#three {
            width: 100%;
            height: 100%;
        }
        #one,#three {
            display: none;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(window).ready(function () {
            $("#left ul li").each(function (index, item) {
                $(item).bind("click", function () {
                    $("#left ul li.currentTab").attr("class", "");
                    $(this).attr("class", "currentTab");
                    $("#right div").css("display", "none");
                    $("#right div:eq(" + index + ")").css("display", "block");
                });
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div id="left">
            <ul>
                <li>通知</li>
                <li class="currentTab">消息</li>
                <li>提醒</li>
            </ul>
        </div>
        <div id="right">
            <div id="one">A</div>
            <div id="two">B</div>
            <div id="three">C</div>
        </div>
        <div class="clear"></div>
    </div>
</body>

效果：http://jscode.chinacxy.com/code/11e918e39ea7c87fed571a9e1f4ac052.aspx

收获园豆：10

artwl | 专家六级 |园豆：16736 | 2012-04-25 13:01

回答的非常好，谢谢，希望以后还能得到您的帮助。

wanglan | 园豆：156 (初学一级) | 2012-04-25 15:42

请教下artwl，这个JSCode怎么玩的呀。wanglan童鞋，我写了个原生JS的，可以看看，算是不才吧。

<!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>
    <title>Untitled Page</title>
    <style type="text/css">
        body, div{font-family:微软雅黑;}
        ul{ margin:0px; padding:0px; list-style:none;}
        a{ text-decoration:none;}
        a:hover{ text-decoration:underline;}
        .de{ width:650px; height:450px; margin:0 auto; margin-top:20px; border:4px solid #999;}
        #JS_message{ width:150px; height:450px; float:left; background:#ccc;}
        #JS_message li{ width:150px; height:50px;}
        #JS_message li.bg{ background:#fff;}
        #JS_message li.bg a{ color:#000;}
        #JS_message li a{ width:150px; height:50px; display:block; text-align:center; line-height:50px; color:#fff;}
        #JS_mess{ font-size:30px;}
        .dt{ display:none;}
    </style>
    <script type="text/javascript">
        function JsMessage() {
            var JS_Message = document.getElementById("JS_message");
            var JS_li = JS_Message.getElementsByTagName("li");
            var JS_mess = document.getElementById("JS_mess");
            var JS_div = JS_mess.getElementsByTagName("div");
            for (var i = 0; i < JS_li.length; i++) {
                (function (_i) {
                    JS_li[_i].onclick = function () {
                        for (var j = 0; j < JS_div.length; j++) {
                            JS_div[j].style.display = "none";
                        }
                        JS_div[_i].style.display = "block";
                    }
                })(i);
            }
        }
        window.onload = function () {
            JsMessage();
        }
    </script>
</head>
<body>
    <div class="de">
          <ul id="JS_message">
                <li><a href="#">消息</a></li>
                <li><a href="#">提醒</a></li>
           </ul>
           <div id="JS_mess">
                    <div>消息</div>
                    <div class="dt">提醒</div>
           </div>
    </div>
</body>
</html>

icepy | 园豆：587 (小虾三级) | 2012-04-25 15:52

@飞舞轻扬在台北: 在 http://jscode.chinacxy.com/ 这里分别输入 HTML，JS，CSS然后按“运行”可以在右下角看到结果，修改好了按“保存”就OK啦。另外，左边可以选择jQuery库

artwl | 园豆：16736 (专家六级) | 2012-04-25 16:00

其他回答(3)

你做的什么应用程序啊右边不是应该是个界面么

┢┦偉 | 园豆：1240 (小虾三级) | 2012-04-25 11:54

你找一些关于左侧tab切换的例子，有很多这样的功能；至于样式，在点击事件中直接用.css（'background','white'）重新设置其样式就行

KivenRo | 园豆：1734 (小虾三级) | 2012-04-25 12:50

呜呜，没挣到豆子啊...

icepy | 园豆：587 (小虾三级) | 2012-04-25 15:53

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

如何实现jquery点击切换的效果？

欢迎，请先登录或者注册。