nimenjian3
nimenjian3
采纳率0%
2019-02-20 16:28

easyui-tabs 怎样实现内容在同一页面,滚动条滚动选项卡跟着变化,类似QQ设置功能?

1、easyui-tabs 怎样实现内容在同一页面,滚动条滚动选项卡跟着变化,类似QQ设置功能
如图
图片说明

2、我的代码如下

 <div id="tt" class="easyui-tabs" style="width: 900px; height: 500px; href"> 
        <div title="封面" style="padding: 10px; "  >
            <table align="center" style="width:800px;">  
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
            </table>
        </div>
            <div title="1.版本控制" style="padding: 10px; ">
                <table>
                    <tr><td>版本控制 </td></tr>
                    <tr><td>版本控制 </td></tr>
                    <tr><td>版本控制</td></tr>
                </table>  
            </div>
            <div title="2.责任主体信息" style="padding: 10px; ">
                This is the help content.
            </div> 
    </div>
    <script type="text/javascript">
        $(function () {
            $('#tt').tabs({
                tabPosition: 'left'
            });

            var tabs = $('#tt').tabs().tabs('tabs');
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].panel('options').tab.unbind().bind('mouseenter', { index: i }, function (e) {
                    $('#tt').tabs('select', e.data.index);
                });
            }
        });
    </script>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • qq_36022290 zhenyu-s5 2年前

    你如果想要开发的话就直接用插件吧,给你个总结的https://cloud.tencent.com/developer/article/1195353

    点赞 评论 复制链接分享
  • qq_34313436 略懂前端萌新 2年前

    右边是一整块区域,点击左边的时候相当于点击锚点,或通过js滚动到一个特定的位置,然后选项卡的话就监听滚动条位置变化而变化

    点赞 评论 复制链接分享

相关推荐