简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JQuery 选项卡
Blogger Information
Blog 33
fans 0
comment 2
visits 42264
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JQuery 选项卡
hanyufeng的博客
Original
656 people have browsed it

运行效果：

JQuery选项卡.gif

说明：

使用JQuery 选择器批量绑定菜单的mouseenter事件，实现鼠标移动时更换选项卡。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <!--<link rel="stylesheet" href="H-ui.css">-->
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
 padding: 0;
 }
        .tab_outer{
            margin: 0px auto;
 width: 60%;
 }
        .menu{
            background-color: #bbb;
 border: 1px solid #bbb;
 line-height: 40px;
 }
        .menu li{
            display: inline-block;
 color: white;
 }
        .menu li:hover {
            cursor: pointer;
 }
        .menu a{
            padding: 11px;
 }
        .content{
            border: 1px solid #ccc;
 height: 300px;
 font-size: 30px;
 }
        .hide{
            display: none;
 }

        .current{
            background-color: #0099dd;
 color: black;
 }
        img{
            width: 100%;
 height: 300px;
 }
    </style>
</head>
<body>
<div class="tab_outer">
    <ul class="menu">
        <li index="c1" class="current">MySQL#</li>
        <li index="c2" >PHP</li>
        <li index="c3" >Ajax</li>
    </ul>
    <div class="content">
        <div id="c1" style="float: left">
            <img src="mysql2.jpg">
        </div>
        <div id="c2" class="hide">
            <img src="php3.jpg">
        </div>
        <div id="c3" class="hide">
            <img src="ajax.jpg">
        </div>
    </div>
</div>

<script>
    $(function () {
        //选择menu类div里的li
//        $('.content div').css('background','yellow');
 $('.menu li').on('mouseenter', function () {
            tab(this);
 });
 });

 //设置当前选项卡，隐藏其它选项卡
 function tab(self) {
        $(self)
            .addClass("current")  //将当前选项卡高亮
 .siblings()  //将其它非当前选项卡的高亮样式取消,先选择当前的兄弟节点
 .removeClass("current");  //再取消高亮样式
 var box = "#" + $(self).attr("index");  //获取当前的自定义索引属性,获取当前点击的是哪一个
 $(box)
            .removeClass("hide")  //去掉它的隐藏样式,将对应的内容盒子显示出来
 .siblings()  //再将其它兄弟盒子内容隐藏,首先先获取其它兄弟节点
 .addClass("hide");  //给这些兄弟节点添加隐藏样式
 }
</script>
</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！