Question

我想将按钮链接到其他页面上的div。但这个div是隐藏的，因为它是子导航的一部分。我在此页面中的子导航由点击淡入淡出组成。

所以这是我的剧本

$("#tab2, #tab3, #tab4, #tab5, #tab6").hide();
$('.nav-tabs a').click(function (e) {
    e.preventDefault();
  var href = $(this).attr('href'); // Select first tab
    $('.tab-pane').fadeOut(200).promise().done(function(){
        $(href).fadeIn(200);
    });
});

这是我的子导航

<div id="menu_secondaire">
<ul class="nav-tabs">
    <li><a href="#tab1" class="scroll">coiffure</a> |</li>
    <li><a href="#tab2" class="scroll">bien-être</a> |</li>
    <li><a href="#tab3" class="scroll">esthétique</a> |</li>
    <li><a href="#tab4" class="scroll">lumière pulsée</a> |</li>
    <li><a href="#tab5" class="scroll">lpg</a> |</li>
    <li><a href="#tab6" class="scroll">fitness</a></li>
</ul>

以下是divs

<div id="tab1" class="tab-pane">Content</div>
<div id="tab2" class="tab-pane">Content</div>
<div id="tab3" class="tab-pane">Content</div>
<div id="tab4" class="tab-pane">Content</div>

当我来自另一个页面时，如何默认显示div tab3 for exemple？希望有人能理解我和你的帮助。

Answer 1

您必须使用:target css选择器为当前div和div:not(:target)选择器进行其他潜水，以便在this page中的代码下方进行演示复制并提交代码

<!DOCTYPE html>
<html>
<head>
<style>
.tab:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
visibility:visible 
/*curent div css style*/
}
.tab:not(:target)
{
border: 2px solid #D4D4D4;
visibility:hidden
/*other div css style*/
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p class="tab" id="news1"><b>New content 1...</b></p>
<p  class="tab" id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>

您可以从其他页面定位。使用this tutorial在css3中添加延迟，持续时间和缓动模式

链接到另一页上的<div>并隐藏</div>

1 个答案: