使用 javascript 或 jquery 将页面的焦点移动到单击的元素上

Move the focus of the page to the clicked element using javascript or jquery

本文关键字：移动 焦点 单击 元素 javascript jquery 使用      更新时间：2023-09-26

>我正在尝试添加一个功能，例如在维基百科上，顶部有文章的大纲，当我单击它时，它会将我带到同一页面中单击的元素，我尝试搜索它，但我在解释它时遇到麻烦，所以我可以获得准确的搜索， 任何人都可以帮助我。这是代码，第二个 foreach 中的 $myvalues[1] 是div 的名称，$cat_name[1] 是 href 属性。

<div class="bran-cat">
            <h2>Category</h2>
            <div class="cat-list">
                <?php
                    foreach($cat_arr['cat_pro'] as $cat_name){
                        echo "<a href='#".$cat_name[1]."' class='cat-anchor'>".">".$cat_name[1]."</a> <br>";
                    }
                    //$sel_cat= $wpdb->get_results("SELECT * FROM ");
                ?>
            </div>
</div>
<?php
        foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
           echo '<div name="'.$myvalues[1].'" class="cat-title" id="'.$myvalues[0].'"><h2>'.$myvalues[1].'</h2></div>';
?>

将name属性添加到锚标记，然后从另一个锚标记中，将 href 设置为 #name 。

例如：

<a name='gohere'></a>
<a href='#gohere'>Click here to go to the named anchor tag</a>

你可以有这样的东西：

<div id="scrollToThisDiv"></div>
<a href="#scrollToThisDiv">GoToTheDiv</a>

您可以使用jQuery对相同的动画进行动画处理，以使其具有更平滑的效果。

<div id="top"></div>
<a href="#home">go to home</a>
<div> some other contents
</div>
<div id="home">Home content Home content Home content Home content</div>
<a href="#top">scroll top</a>

<a href="#clickhere">Go to Div</a>
.
.
.
<div id="clickhere">
Your Stuff
</div>

像上面的Div标签一样，将ID标签添加到您想要的位置，并使用Anchor标签指向该特定元素。

相关文章：