javascript如何返回索引值？关于css实现tab菜单

jiangjinsong 2007-12-17 06:04:54

我想写一个函数，在鼠标点击要素的时候返回元素在这个集合中的索引值，从而影响文档其他的元素下索引值相对应的元素；例如：
<div id="container">
<ul id="beautytab">
<li><a href="#">标签卡一</a></li>
<li><a href="#">标签卡二</a></li>
<li><a href="#">标签卡三</a></li>
<li><a href="#">标签卡四</a></li>
</ul>
</div>
<div id="content">
<ul id="tabcontent">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
我想实现点击标签卡1就把内容1显示，其他的隐藏的javascript的代码

...全文

225 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

qiuming0306 2007-12-19

打赏
举报

用javascript为每一个div添加函数 onclick(num)就可以返回索引值！我给的例子你自己研究一下！呵呵！

qiuming0306 2007-12-19

打赏
举报



<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>css 菜单</title>

    <style>

body{

background-color:#B8B8A0;

}

#fbtn{

display:none;

overflow:hidden;

border-style:solid;

border-width:1px;

border-color:#e1e1c9

#e1e1c9 #6e6e56 #6e6e56;

padding:1 1 1

1;

width:115px;

height:30px;

}

#fbtn_txt{

position:relative;

}

#fbtn_txt

div{

height:30px;

padding-top:11px;

font-size:12px;

font-family:small

fonts;

color:#800080;

text-align:center;

cursor:hand;

}

#fbtn_mask{

background-color:#ffffff;

position:relative;

width:100%;

height:100%;

}

</style>

</head>

<body>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                G1</div>

            <div>

                good morning</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                G2</div>

            <div>

                good evening</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                M1</div>

            <div>

                my name is fireyy</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                M2</div>

            <div>

                mm mm i love u</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                G1</div>

            <div>

                good morning</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                G2</div>

            <div>

                good evening</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                M1</div>

            <div>

                my name is fireyy</div>

        </div>

    </div>

    <div id="fbtn">

        <div id="fbtn_mask">

        </div>

        <div id="fbtn_txt">

            <div>

                M2</div>

            <div>

                mm mm i love u</div>

        </div>

    </div>



    <script>

    debugger

var current=null;

var t=null;



    for(var i=0;i<fbtn.length;i++)

    {

        fbtn_txt[i].style.posTop=-30;

        fbtn_mask[i].style.posTop=-30;

        fbtn[i].index=i;

        fbtn[i].style.display="block";

        fbtn[i].onmouseover=function()

        {

            if(!current)

            {

                current=this;

                domove(this.index);

            }

            else if(current!=this)

            {

                domove(current.index);

                domove(this.index);

                current=this;

            }

        }    

        fbtn[i].onmouseout=function()

        {

            if(event.toElement==this.parentElement&t==this)

            {

                domove(this.index);

                current=null;

            }

        }

    }



    function domove(num)

    {

        var o=fbtn_txt[num];

        var m=fbtn_mask[num];

        

        if(o.style.posTop<-60)

        {

            o.style.display="none";

            var t=o.children[1].innerHTML;

            o.children[1].innerHTML=o.children[0].innerHTML;

            o.children[0].innerHTML=t;

            o.style.posTop=-30;

            o.style.display="block";

            if(m.style.posTop>30)

            m.style.posTop=-30;

            else

            m.style.posTop=0;

        }

        else

        {

            m.style.posTop+=3;

            o.style.posTop-=3;

         setTimeout('domove('+num+')',15);

        }

     }

    </script>



</body>

</html>

jiangjinsong 2007-12-19

打赏
举报

没人可以回答？

jiangjinsong 2007-12-19

打赏
举报

liVisibility(iNode) 这里的大小错了啊！！！

jiangjinsong 2007-12-19

打赏
举报

晕了，确实是很酷的菜单，但是不是我想要的效果，啊啊啊啊！！！

sunbrighter 2007-12-18

打赏
举报

<div id="container">
<ul id="beautytab">
<li> <a href="#" onmouseover="livisibility(0)"> 标签卡一 </a> </li>
<li> <a href="#" onmouseover="livisibility(1)"> 标签卡二 </a> </li>
<li> <a href="#" onmouseover="livisibility(2)"> 标签卡三 </a> </li>
<li> <a href="#" onmouseover="livisibility(3)"> 标签卡四 </a> </li>
</ul>
</div>
<div id="content">
<ul id="tabcontent">
<li style="visibility:hidden"> 内容1 </li>
<li style="visibility:hidden"> 内容2 </li>
<li style="visibility:hidden"> 内容3 </li>
<li style="visibility:hidden"> 内容4 </li>
</ul>
</div>
<script language="javascript">
function liVisibility(iNode)
{
var li=document.all["tabcontent"].childNodes;
for(i=0;i<li.length;i++)
{
if(i==iNode)
li(i).style.visibility="visible";
else
li(i).style.visibility="hidden";
}
}
</script>

sunway8110 2007-12-18

打赏
举报

为什么不设计得简单点？如：
<div id="tabcontent1" style="visibility:hidden">
内容1
</div>

<div id="tabcontent2" style="visibility:hidden">
内容2
</div>

<div id="tabcontent3" style="visibility:hidden">
内容3
</div>

点击的时候，显示相应的content就可以了

dh20156 2007-12-18

打赏
举报

不是，是CSS版一位斑竹的！

jiangjinsong 2007-12-18

打赏
举报

是楼上的博客吗？

dh20156 2007-12-18

打赏
举报

参考：
http://blog.doyoe.com

里边有很多关于CSS构造的东西！

jiangjinsong 2007-12-18

打赏
举报

不是很懂，o(∩_∩)o...，看不清楚你思路

jiangjinsong 2007-12-18

打赏
举报

我想知道javascript有没有返回索引值的函数呢？

tantaiyizu 2007-12-17

打赏
举报



//try this:



$(document).ready(function(){

  $("div ul li").click(function(){

    $("#beautytab li").each(function(){

       $(this).hide();

    });

    $(this).show();

  });

});