制作网页选项卡问题?

如图三个选项卡，点击出现不同内容，我可以看到不一样的内容，但是我一刷新这个页面，页面就会把第三个选项卡的内容显示出来在第一个选项卡右边，我代码好像有点问题但是我不知道怎么改，求大佬帮我看看!

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        .per-current {
            color: red
        }

        .guide_wrap div {
            display: none;
        }
    </style>
</head>

<body>
<div class="per-nav-list-box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div class="guide_wrap">
    <div>111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
<script>
    $(function () {
        $('.per-nav-list-box ul li').click(function () {
            $(this).addClass('per-current').siblings().removeClass('per-current');
            $('.guide_wrap>div:eq(' + $(this).index() + ')').show().siblings().hide();
        })
    })
</script>
</body>
</html>


按照你那个写的,没啥问题

$('.guide_wrap>div').eq($(this).index()).show().siblings().hide()