jquery练习12 简易选项卡(TBC)

来源：互联网发布：d盘格式化数据恢复编辑：程序博客网时间：2024/05/21 22:43

原题及原生js解法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />    <script src="http://code.jquery.com/jquery-1.8.3.js">    </script>    <script type="text/javascript">    $(document).ready(function() {        $("td").hover(function() {            if ($(this).text() == "第一课") $("#ul1").toggleClass("show");            if ($(this).text() == "第二课") $("#ul2").toggleClass("show");            if ($(this).text() == "第三课") $("#ul3").toggleClass("show");        });    });    </script>    <style type="text/css">    .wrapper {        text-align: center;        margin: 0 auto;    }    table,    td {        border: 1px solid black;    }    #textArea {        height: 200px;        width: 300px;        border: 1px solid black;    }    ul {        display: none;    }    .show {        display: block;    }    </style>    <title>        2.7 简易选项卡    </title></head><body>    <div class="wrapper">        <div id="tabs">            <table>                <tr>                    <td id="class1">第一课</td>                    <td id="class2">第二课</td>                    <td id="class3">第三课</td>                </tr>            </table>            <div id="textArea">                <ul id="ul1">                    <li>1.1</li>                    <li>1.2</li>                    <li>1.3</li>                    <li>1.4</li>                    <li>1.5</li>                    <li>1.6</li>                </ul>                <ul id="ul2">                    <li>2.1</li>                    <li>2.2</li>                    <li>2.3</li>                    <li>2.4</li>                </ul>                <ul id="ul3">                    <li>3.1</li>                    <li>3.2</li>                    <li>3.3</li>                </ul>            </div>        </div>    </div></body></html>

效果是移到不同td,textArea中的内容不同

在别的案例中,多数都是选项卡也用ul来设计,并且是通过记录下标的方法判断鼠标目前移在什么位置,而不是通过判断其中的文字内容.

待后续修改

阅读全文

0 0