Question

我遇到的问题是当点击标签并激活时，屏幕会跳到顶部。我可以告诉它开始以id为目标，但我不太清楚如何解决这个问题。

也许针对不同的元素？

<style type="text/css">
    /*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }

        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }

        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }

    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('.tabs .tab-links a').on('click', function(e)  {
            var currentAttrValue = $(this).attr('href');

            // Show/Hide Tabs
            $('.tabs ' + currentAttrValue).slideDown(600).show().siblings().hide();

            // Change/remove current tab to active
            $(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
    });       
</script>
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
    </div>
</div>

Answer 1

如果我明白你在说什么时会说什么＆＃34;屏幕会跳到顶部＆＃34;因为标签是＆＃34;所针对的标识，＆＃34;一个~~解决方案~~替代方案，显然仍然有相同的问题（！）是使用标签本身以外的链接。例如，您可以使用单选按钮（或复选框）实现相同的效果。这是一个小提琴，我很快就把你的代码作为基础拼凑在一起（因为我把它快速地拼凑在一起，它可能不会完美，但它会给你基本的想法）：

http://jsfiddle.net/hewa29nt/2/

基本上，您的列表项看起来像这样：

    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">Tab #1</label>
    </li>

然后，您可以使用：checked伪类（而不是：在链接上处于活动状态）进行样式更改。唯一的问题是，它不能在IE8上工作（它不支持：检查），因此，如果您关心IE8，您可以使用条件注释和原始基于链接的代码来访问该浏览器。

如果您对此感兴趣，您还可以在本文末尾的这种情况中看到有关IE8选项的一些讨论：

http://www.ascendiv.com/pure-css-tabs-demystified-and-slightly-improved-or-pure-css-tabs-even-in-ie8/

编辑在该帖子的末尾^，讨论了使用：hover 。这样做是真正消除跳跃的一种方式，虽然你的标签会通过悬停而不是通过点击进行导航，而且我不确定这是否是你所做的事情。我想要。

选项卡单击时跳转

1 个答案: