论坛首页 Web前端技术论坛

jquery使用index()方法轻松实现tabs切换

浏览 4691 次
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-07-01   最后修改:2009-07-01

163的tabs很简单,但是参数多,这里用jquery不用参数即可tabs,也很简单。

 

话说最近在用index()实现tabs,代码也不多:

 

$(function(){
    var $title = $("h3 a");
    var $content = $("div");
    $title.mousemove(function(){
        var index = $title.index($(this));
        $content.hide();
        $($content.get(index)).show();

        return false;
    });
});

 

 

/* 这是js写法,下面给你相应的html结构,当然css要定义div第一个显示,其他隐藏才行 */

<h3>
<a href="#">选择1</a>
<a href="#" >选择2</a>
<a href="#">选择3</a>
<a href="#" >选择4</a>
</h3>

<div>选择1的内容</div>
<div>选择2的内容</div>
<div>选择3的内容</div>
<div>选择4的内容</div>

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics