Question

在我的主页上，我有一个按钮。该按钮会导致另一个带有标签的页面。如果单击主页上的特定按钮，如何激活一个选项卡并显示其内容？这是否可能，或者必须发生事件才能实现这一目标？

＆＃13;

if(location.hash) {
        $('#tabbedContent').each(function(){
            $(this).find("#champion" + location.hash.substr(1)).fadeIn();
        });
    } else {
        $('#tabbedContent').each(function(){
            $(this).find(':first-child').fadeIn();
        });
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
	<div class="btnList">
		<ul class="btnSet">
			<li>
				<a class="tab linkSection" href="#annual"><span>Nominate a Champion</span></a>
			</li>
			<li>
				<a class="tab linkSection" href="#pathology"><span>Become a Champion</span></a>
			</li>
			<li>
				<a class="tab double linkSection" href="#workshop"><span>Promote the Program</span></a>
			</li>
			<li>
				<a class="tab double linkSection" href="#champion"><span>Contact a Champion</span></a>
			</li>
		</ul>
	</div><!-- meetings tabbed section -->
	<div class="tabbedContent onPage active" id="annual">
		<div class="tabbedContent infoPage">
			<div class="greyBox column col-50">
				<h2>text</h2>
			</div>
			<div class="column col-50">
				<div class="borderBox">
					<h2>text</h2>
				</div><br>
			</div>
		</div>
	</div>
</div>

＆＃13;

Answer 1

这个问题可以完全用CSS解决。

默认情况下，将所有标签设置为不可见，然后使用CSS :target 伪类来设置活动标签的样式。

/* All tabs use this class by default */
.tab { opacity:0; position:absolute;} 

/* The active tab will use this rule. It's important that this selector
    is a more specific selector than the default selector, which it is here.  */
.tab:target { opacity:1; transition:1.5s;}

<nav>
  <a href="#tab1">Tab 1</a>
  <a href="#tab2">Tab 2</a>
  <a href="#tab3">Tab 3</a>
  <a href="#tab4">Tab 4</a>
</nav>
<div id="tab1" class="tab">
  <h1>Welcome to Tab 1</h1>
</div>
<div id="tab2" class="tab">
  <h1>Welcome to Tab 2</h1>
</div>
<div id="tab3" class="tab">
  <h1>Welcome to Tab 3</h1>
</div>
<div id="tab4" class="tab">
  <h1>Welcome to Tab 4</h1>
</div>

如何使用JQuery使用特定URL激活选项卡

1 个答案: