我研究了这个并且找不到答案。我发现的解决方案并没有取得成功。
我正在构建一个WordPress模板,我有一个包含动态标签的部分。当用户选择特定选项卡时,其下方的数据会相应更改。
但是,我无法像普通的页内锚点那样向下滚动焦点。我的相关代码是:
链接:
<a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span><?php the_sub_field('work_tab_title');?></span></a>`
锚:
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
除了锚点的滚动/焦点外,我当前的功能在标签更改方面有效。如果我能给你一个URL,这会更容易,但我不确定这是否违反礼节,请告诉我。
谢谢
对于上下文和更好的理解,需要更大的代码部分:
<div class="container">
<ul class="tab-strips">
<?php $i=0; $j=1; while(has_sub_field('work_slider')):?>
<?php
$string=get_sub_field('work_tab_title');?>
<li data-bottom-top="top:-30px; opacity:0;" data-center="top:0px; opacity:1;"><a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span>
<?php the_sub_field('work_tab_title');?>
</span></a></li>
<?php $i++; $j++; endwhile;?>
</ul>
</div>
<?php $i=1; while(has_sub_field('work_slider')): ?>
<?php $string = get_sub_field('work_tab_title'); ?>
<?php $slider_title = get_sub_field('slider_title'); ?>
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
<?php ?>
<script type="text/javascript">
document.getElementById('<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content').scrollIntoView(true);
</script>
<?php if(get_sub_field('inner_slider')):?>
<div class="container">
<div class="row" style="margin-left:9.6%;">
<h3>
<?php echo $slider_title; ?>
</h3>
</div>
</div>
<div class="slider">
<div class="container">
<div class="row">
<ul class="clearfix work-slider-controls" id="work_slider_controls<?php echo $i;?>">
<?php $j=0; while(has_sub_field('inner_slider')):?>
<li><a class="work-slider-tab" href="#" data-work-index="<?php echo $i-1;?>" data-slider-index="<?php echo $j;?>" rel="<?php echo $j;?>">
<?php the_sub_field('work_inner_title');?>
</a></li>
<?php $j++; endwhile;?>
</ul>
</div>
</div>
</div><!-- slider -->