2 xtzz92 XTZZ92 于 2017.01.12 12:20 提问

为什么tab切换js不能共用,改了id也不行,求大神解答

$(function(){
window.onload = function()
{
var $li = $('#tabb li');
var $ul = $('#content_t ul');

        $li.mouseover(function(){
            var $this = $(this);
            var $t = $this.index();
            $li.removeClass();
            $this.addClass('current');
            $ul.css('display','none');
            $ul.eq($t).css('display','block');
        })
    }
});
<div id="outer">
<ul id="tabb">
    <li class="current">谐波减速器</li>
    <li>RV减速器</li>
</ul>
<div id="content_t">
    <ul style="display:block;" class="fo">
        <li><a href="#" target="_blank"><img src="img/te_03.jpg"></a>

安徽省配天机器人技术有限公司
获奖产品:

六轴桌面型机器人AIR6A+驱控一体化控制系
统ARCCD10


金球奖

2个回答

qq_29594393
qq_29594393   Ds   Rxr 2017.01.12 13:37
 $("tabb li").mouseover(function(){
     $("#content_t ul :eq("   +$(this).index()+")").show().siblings().hide();
 })

应该是要这个

showbo
showbo   Ds   Rxr 2017.01.12 13:47

没问题吧。你jquery正确导入了没有先


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $(function(){
       //// window.onload = function()//加这个没有必要
       /// {
            var $li = $('#tabb li');
            var $ul = $('#content_t ul');

            $li.mouseover(function(){
                var $this = $(this);
                var $t = $this.index();
                $li.removeClass();
                $this.addClass('current');
                $ul.css('display','none');
                $ul.eq($t).css('display','block');
            })
      //  }
    });
</script>
<div id="outer">
    <ul id="tabb">
        <li class="current">谐波减速器</li>
        <li>RV减速器</li>
    </ul>
    <div id="content_t">
        <ul style="display:block;" class="fo">
            <li>
                <a href="#" target="_blank"><img src="img/te_03.jpg"></a>
                <p class="an">谐波减速器
                    <a href="#" target="_blank">安徽省配天机器人技术有限公司</a>
                    <o>
                        获奖产品:<br>
                        六轴桌面型机器人AIR6A+驱控一体化控制系
                        统ARCCD10<o>
                </p>
                <span class="jin">金球奖</span>
            </li>
        </ul>
        <ul style="display:none;" class="fo">
            <li>
                <a href="#" target="_blank"><img src="img/te_03.jpg"></a>
                <p class="an">RV减速器
                    <a href="#" target="_blank">安徽省配天机器人技术有限公司</a>
                    <o>
                        获奖产品:<br>
                        六轴桌面型机器人AIR6A+驱控一体化控制系
                        统ARCCD10<o>
                </p>
                <span class="jin">金球奖</span>
            </li>
        </ul>
</div>
XTZZ92
XTZZ92 删掉前面那一句就可以了,thanks
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
MCP42010系列程控电位器
STM32VET6 模拟SPI与MCP42010系列程控电位器通信,设定电位器阻值,硬件形式不知道为什么不行,求大神指点
国内城市插件
国内城市插件 修改了tab切换不能搜索等bug
(完美解决)PL/SQL显示乱码-无法进行中文条件查询解决
PLSQL乱码问题皆是ORACLE服务端字符集编码与PLSQL端字符集编码不一致引起。 类似乱码问题都可以从编码是否一致上面去考虑。     解决:     1. 查询Oracle服务端字符集编码,获取NLS_CHARACTERSET字段值:  执行  sql代码      select * from v$nls_parameters;  保存查询到的值,如:NLS_CHARAC
修改hosts无法访问google
修改hosts浏览谷歌等网站 首先安装下面网站修改hosts: http://zeus.softweek.net/item-slt-1.html 通常情况下就可以访问了。如果使用的是chrome浏览器,则有可能在修改了hosts后,仍然无法访问。 可能的原因是浏览器默认是http://www.google.com 所以一直无法链接,用 https://www.google.com.
Mysql如何支持Emoji表情,修改数据库字符集为utf8mb4后依然不行
改为utf8mb4是可以支持emoji表情的,另外客户端在连接的时候也要指定utf8mb4才行.
VS编写的记事本,不能保存中文,求帮助,只能用文件下面的功能
不能保存中文,win7自带的改成Unicode也不行,求帮助
原生JS实现TAB栏切换
之前上传了一个jquery实现tab栏切换的博客,这个是原生js实现tab栏切换的案例,不多说直接上代码!同样复制粘贴就能看到效果哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .Box{ width: 2
tab切换各种不同的解决方案
tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了。不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己遇到的情况做了一下总结,对以下几点做了优化。 a,三个写法可根据具体页面使用环境而选择。 b,结构层、表现层、行为层的分离 c,结构层标签选择不受限。 d,对函数传参以避免一个页面多个tab切换行为与样式的相互干扰
关于Csharp通过url下载的问题
为什么documentComplete 就是不起作用呢?为什么反复的循环呢?求大神解释下
纯JS实现的简单tab选项卡切换效果
本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width