首页 文章

标签 - 使用悬停（mouseeneter和leave）并单击

提问于
浏览 次
0

我在使用标签时遇到了问题 . 我试图实现标签功能，例如网站http://mashable.com .

标签可以悬停并通过悬停显示标签内容 . 如果我单击选项卡，则应隐藏选项卡内容，不可见UNTIL mouseleave <li> . 如果我再次进入mouseenter，将显示选项卡内容 .

我有组合悬停和点击的问题 . 有了这段代码，我遇到了以下问题：
1.页面加载

  • 如果在页面加载期间向上和向下显示选项卡，则会显示选项卡内容，因为尽管有单击选项
    2.单击选项卡 <li>
  • 点击标签有时显示标签内容，有时不显示 - 没有规则;必须不显示
  • 如果没有显示标签内容，如果我移动鼠标（我没有鼠标移动 <li> ），会显示某些标签内容，有时不显示

HTML：

<div id="tabs">
    <ul id="tabstest">
        <li id="tab1" class="tab" onclick="location.href='\ttest1.php';"  style="cursor:pointer;"><strong>Test 1</strong></li>
        <li id="tab2" class="tab"> <a href="/Test/test2.php" class="tab_link" ><strong><br>Test 2</strong></a></li>
        <li id="tab3" class="tab"> <a href="/Test/test3.php" class="tab_link" ><strong>Test 3</strong></a></li>
        <li id="tab4" class="tab" onclick="location.href='\ttest4.php'; " style="cursor:pointer;" ><strong><br>Test 4</strong></li>
        <li id="tab5" class="tab"> <a href="/Test/test5.php" class="tab_link" ><strong><br>Test 5</strong></a></li>
        <li id="tab6" class="tab"> <a href="/Test/test6.php" class="tab_link" ><strong><br>Test 6</strong></a></li>
    </ul>
</div>
<div id="tabcontents">
    <div id="tab1content" class="tabcontent">
        <p>tab1 content</p>
    </div>  
    <div id="tab2content" class="tabcontent">
        <p>tab2 content</p>
    </div>   
    <div id="tab3content" class="tabcontent">
        <p>tab3 content</p>
    </div>
    <div id="tab4content" class="tabcontent">
        <p>tab4 content</p>
    </div>    
    <div id="tab5content" class="tabcontent">
        <p>tab5 content</p>
    </div>
    <div id="tab6content" class="tabcontent">
        <p>tab6 content</p>
    </div>
</div>

JQuery的：

$(window).load(function(){
    $(".tab").focus(function() {
       var tabId = $(this).attr('id');
        $("#" + tabId + "content").hide();
   });  
    $(".tabcontent").focus(function() {
        $(this).hide();
    });
    $(".tab").click(function() {
       var tabId = $(this).attr('id');
        $("#" + tabId + "content").hide();
   });  
    $(".tabcontent").click(function() {
        $(this).hide();
    }); 
    $(".tab").mouseenter(function() {
        var tabId = $(this).attr('id');
        $("#" + tabId + "content").show();
   });
    $(".tabcontent").mouseenter(function() {
        $(this).show();
    });
    $(".tab").mouseleave(function() {
        var tabId = $(this).attr('id');
        $("#" + tabId + "content").hide();
    });
    $(".tabcontent").mouseleave(function() {
        $(this).hide();
    });
});
jquery tabs click mouseenter mouseleave

3 回答

  • 0

    你好，而不是使用制表符，更容易制作一个ul li并在li中放入内容，然后使用hover（）因为div不会隐藏成为li的子节点

    <div id="tabs">
<ul id="tabstest">
    <li id="tab1" class="tab" onclick="location.href='\ttest1.php';"  style="cursor:pointer;">
        <strong>Test 1</strong>
        <div id="tab1content" class="tabcontent">
            <p>tab1 content</p>
        </div>  
    </li>
    <li id="tab2" class="tab" <a href="/Test/test2.php" class="tab_link" >
        <strong><br>Test 2</strong></a>
        <div id="tab2content" class="tabcontent">
            <p>tab2 content</p>
        </div>   
    </li>
    <li id="tab3" class="tab" <a href="/Test/test3.php" class="tab_link" >
        <strong>Test 3</strong></a>
        <div id="tab3content" class="tabcontent">
            <p>tab3 content</p>
        </div>
    </li>
    <li id="tab4" class="tab" onclick="location.href='\ttest4.php'; " style="cursor:pointer;" >
        <strong><br>Test 4</strong>
         <div id="tab4content" class="tabcontent">
            <p>tab4 content</p>
        </div>    
    </li>
    <li id="tab5" class="tab" <a href="/Test/test5.php" class="tab_link" >
        <strong><br>Test 5</strong></a>
    </li>
    <li id="tab6" class="tab" <a href="/Test/test6.php" class="tab_link" >
        <strong><br>Test 6</strong></a>
    </li>
</ul>
</div>

jquery:

$(function(){
    $("#tabstest li").hover(function(){
        $(this).children("div").show();
    },function(){
        $(this).children("div").hide();
    });
});
    回复于
  • 0

    首先在页面加载时添加 $(".tabcontent").hide() ，以便默认隐藏所有内容 . 除此之外，我没有找到任何"sometimes it works, sometime not"错误 . 您的代码可以正常运行，但在我离开或点击标签后，它不会像mashable一样被隐藏 .

    Personaly我试着避免列表因为我发现div的基本结构更容易从javascript控制 . 有几种方法可以创建您想要的东西，开发人员可以选择最适合自己的方式 .

    正如Lesonaschi所说，可能最好的选择是嵌套元素（选项卡内部的内容 div 或 li ），因此悬停函数应该适用于整个块 . 但是不要相信我的话，尝试和实验:)

    回复于
  • 0

    我没有发布CSS，也许css创建元素div，ul，li，...的问题

    #tabs {

        width: 950px;

    }

    #tabs ul li a {
    display: block;
    }

    #tabs ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: block;
    }
    #tabs ul li {
        display: block;
        float: left;
        padding: 2.8px;
        margin: 0px;
        font-size: 15.5px;
        border-right:3px double #cccccc;
        background: #000000 url(/images/tab2.jpg) no-repeat 0px 0px;
        color:#ffffff; 
        text-align: center;
    }

    #tabs ul li:last-child { border-right: none;  }
    #tabs li:first-child + li + li + li + li  + li{border-right:none;}
    #tabcontents {
        clear: both;

    }

    .tabcontent {
        display: none;
        width: 947px;
        height:295px;
        background: #202020;
        position: absolute;
        color:#f0f0f0;
        z-index:9999;
    }


    a.tab_link{
        text-decoration:none;

    }

    a.tab_link:link { 
        color: #ffffff; 
    }

    a.tab_link:visited { 
        color: #f6911b; 
    }

    a.tab_link:hover {
        color: #eeeeee;
    }

    a.tab_link:active {
        color: #f6911b;
    }
    回复于

相关问题