Question

我真的需要一些jquery标签的帮助。我想通过外部锚链接（http://www.url.com#content2）到达特定选项卡，导航链接将被激活并显示正确的选项卡。其他HTML页面

ScriptManager.RegisterStartupScript(this, this.GetType(), "pop", "<script>function myFunction() { alert('" + ds.Tables[0].Rows[0][0].ToString() + "'); document.getElementById('btnreset').click(); }</script>", false);

HTML

<a href="#b">B Title</a> | <a href="#bb">B Title</a>

的Javascript

<div class="tabs-container">
    <ul class="tabs">
        <li class="current"><h4><a href="javascript:void();" data-tab="tab1" title="Title 1">Title 1</a></h4></li>
        <li><h4><a href="javascript:void();" data-tab="tab2" title="Title 2">Title 2</a></h4></li>
    </ul>

    <div class="border-box group">
        <div id="tab1" class="panel group showing" style="display: block;">
            a
        </div>
        <div id="tab2" class="panel group" style="display: none;">
            <a id="b">B title A<a><br>
information...... <br><br/>
<a id="bb">B title B<a><br>
information...... <br><br/>
        </div>
    </div>
</div>

我如何编辑？谢谢你的帮助。

Answer 1

使用jQuery this.hash;

＆＃13;

$(document).ready(function(){
	$('#tab1').show();
	$('.tabs li a.current').addClass('current');
	$('.tabs li a').click(function() {
		var tabDivId = this.hash;							   
		
		$('.tabs li a').removeClass('current');
		$(this).addClass('current');
		$('.panel').hide();
		$(tabDivId).fadeIn();
		return false;
	});
});

＆＃13;

.panel{
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs">
    <li><h4><a href="#tab1" data-tab="tab1" title="Title 1">Title 1</a></h4></li>
    <li><h4><a href="#tab2" data-tab="tab2" title="Title 2">Title 2</a></h4></li>
</ul>

<div class="border-box group">
    <div id="tab1" class="panel group showing">
        a
    </div>
    <div id="tab2" class="panel group">
        b
    </div>
</div>

＆＃13;

Answer 2

将href属性值替换为相应Tab的id，并使用下面的代码...

HTML

<ul class="tabs">
<li class="current">
<h4><a data-tab="tab1" title="Title 1" href="#tab1">Title 1</a></h4>
</li>
<li>

<h4><a data-tab="tab2" title="Title 2" href="#tab2">Title 2</a></h4>
</li>

</ul>

<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;"> a </div>
<div id="tab2" class="panel group" style="display: none;"> b </div>
</div>

<强> Jquery的

$('.tabs a').click(function(){
var attr = $(this).attr('href')
$('.tabs li').removeClass('current');

$(this).closest('li').addClass('current');

$('.border-box div').hide();
$(attr).show();

})

<强> CSS

.border-box div { display:none;}
.showing { display:block;}

您可以询问是否需要任何帮助..

使用锚链接打开自定义jquery选项卡

2 个答案: