Question

我有标签问题（使用li）。我不知道如何解决这种情况：通过单击选项卡（选项卡链接）不显示选项卡内容，但如果我再次悬停选项卡以显示选项卡内容。（只需首先点击不显示标签内容）

提前致谢！

HTML：

<div id="tabs">
        <ul id="tabstest">
        <li id="first_tab" style="width:200px; height:40px;"><a href="#tab1" class="active tab_link" onclick="window.location.href = '\auto.php';"><strong>Auto</strong></a></li>
        <li style="width:180px; height:40px; line-height: 12px;"><a href="#tab2" class="tab_link" onclick="window.location.href = '\automk.php';"><strong><br>Automk</strong></a></li>
        <li style="width:120px; height:40px;"><a href="#tab3" class="tab_link" onclick="window.location.href = '\info.php';"><strong>Info</strong></a></li>
        <li style="width:180px; height:40px; line-height: 12px;"><a href="#tab4" class="tab_link" onclick="window.location.href = '\tteleko.php';"><strong><br>Teleko</strong></a></li>
        <li style="width:120px; height:40px; line-height: 12px;"><a href="#tab5" class="tab_link" onclick="window.location.href = '\pamet.php';"><strong><br>Pamet</strong></a></li>
        <li id="last_tab" style="width:100px; height:40px; line-height: 12px;"><a href="#tab6" class="tab_link" onclick="window.location.href = '\rracun.php';"s><strong><br>Računari</strong></a></li>
    </ul>
    </div>
    <div id="tabcontents" >
        <div id="tab1" class="tabcontent">
        <img src="/images/baner22.jpg" width="200" height="150" alt="Slideshow Image 2" title="Slideshow Image 2" style="float:left; margin:5px 5px 5px 5px;"/>
        <p style="margin:5px 5px 5px 5px;">tab1 content</p>
        </div>
        <div id="tab2" class="tabcontent">
        <p>tab2 content</p>
        </div>
        <div id="tab3" class="tabcontent" >
        <p>tab3 content</p>
        </div>
        <div id="tab4" class="tabcontent">
        <img src="images/baner22.jpg" width="947" alt="Slideshow Image 2" title="Slideshow Image 2" />
        </div>
        <div id="tab5" class="tabcontent">
        <img src="/images/baner32.jpg" width="947" alt="Slideshow Image 2" title="Slideshow Image 2" />
        </div>
        <div id="tab6" class="tabcontent">
        <img src="/images/banner35.jpg" width="947" alt="Slideshow Image 2" title="Slideshow Image 2" />
        </div>
    </div>

JQuery的：

  $("#tabstest li").click(function() { 

          ????

});


 $("#tabstest li").hover(function () {

$("#tabstest li").removeClass('active');

    $(this).addClass("active");

  var selected_tab = $(this).find("a").attr("href");

    $(selected_tab).fadeIn();

          }, function () {

$("#tabstest li").removeClass('active');

  var selected_tab = $(this).find("a").attr("href");

    $(selected_tab).hide();
});

Answer 1

你可以这样做。在第一次点击它不会做任何事情。但是在第一次点击后它会显示数据。

var clickCount = 0;
$("#tabstest li").click(function() { 
     if (clickCount > 1) {
        $(this).addClass("active");
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
     }
     clickCount++;
});


 $("#tabstest li").hover(function () {

$("#tabstest li").removeClass('active');

    $(this).addClass("active");

  var selected_tab = $(this).find("a").attr("href");

    $(selected_tab).fadeIn();

          }, function () {

$("#tabstest li").removeClass('active');

  var selected_tab = $(this).find("a").attr("href");

    $(selected_tab).hide();
});

li作为选项卡，组合悬停（或mouseenter和mouseleave）并单击

1 个答案: