Question

我很困惑使用什么只更改页面部分。我有一张图片让我的问题更加清晰。

关于我们部分右侧有链接。我点击的每个链接，整个部分应该改变。我知道它使用javascript或ajax来完成它而无需重新加载页面。有没有其他方法我可以做到sonner？可以自助旋转木马吗？

Answer 1

Bootstraps carousel很难改变，因为它内置于框架中，你可以使用jQuery UI作为标签并对它们进行样式化或制作你自己的。

我发现这个纯CSS示例，我认为这就是你要找的东西（Kezz Bracey的归功），这是一个完全的CSS3标签集合，你需要做的就是改变要使用的代码你的页面（例如：她的标签位于顶部，你的标签位于右侧。）

Anyway, here is the link:

Pure CSS3 and HTML5 tabs - Codepen

P.S：我会把这个作为评论，但我的代表不够高但是，希望它有所帮助！

Answer 2

您应该尝试为每个部分添加id，并将链接的id与它们相关联。现在，您可以使用jQuery在点击链接时滚动到该特定部分。

function scrollToSection(id){
  // Remove "link" from the ID
  id = id.replace("link", "");
  // Scroll
  $('html,body').animate({
    scrollTop: $("#"+id).offset().top},
    'slow');
}

$("#sidebar > ul > li > a").click(function(e) { 
  // Prevent a page reload when a link is pressed
  e.preventDefault(); 
  // Call the scroll function
  scrollToSection($(this).attr("id"));           
});

在此处查看演示：https://jsfiddle.net/VPzxG/

或

如果您在滚动到其他部分时不想要动画，则可以使用纯HTML。

查看此演示：https://jsfiddle.net/ywxbLswt/

或

如果你想隐藏/显示部分，这里是小提琴： https://jsfiddle.net/ywxbLswt/1/

Answer 3

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var option = 'About';
        var url = window.location.href;
        option = url.match(/option=(.*)/)[1];
        showDiv(option);
    });
    function showDiv(option) {
        $('.boxes').hide();
        $('#' + option).show();
    }
</script>

<ul>
    <li><a href="yourpage.html?option=About">About Us</a></li>
    <li><a href="yourpage.html?option=Link1">Link1</a></li>
</ul>


<div class="boxes" id="About">
    <h1>About Us</h1>
    <p>About content here</p>
</div>
<div class="boxes" id="Link1">
    <h1>Link1 Header</h1>
    <p>Link1 content here</p>
</div>

试试这个..希望这会帮助你。

用链接更改页面部分

3 个答案: