Question

我想在用户点击图片时从屏幕右侧弹出一个联系表单。为此，我遵循了this链接。

我的代码是：

<script src='jquery-1.10.1.min.js'></script> // this file is in the same folder.
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                              //class of the element that will be your tab
    pathToTabImage: 'contact_tab.gif',                  //path to the image for the tab *required*
    imageHeight: '122px',                               //height of tab image *required*
    imageWidth: '40px',                               //width of tab image *required*    
    tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                        //speed of animation
    action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
    topPos: '200px',                                   //position from the top
    fixedPosition: false                               //options: true makes it stick(fixed position) on scroll
});
});

</script>
<style>
    .slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}
</style>
<html>
    <head>
    </head>
    <body>
        <div class="slide-out-div">
            <a class="handle" href="http://link-for-non-js-users">Content</a>
            <h3>This is extra content</h3>
            <p>Something that wasn't important enough to be in your main body, 
           but that you wanted to hide off the side of your screen for some reason.
            </p>
            <p>Could be a form to submit feedback, or contact info</p>
        </div>
    </body> 
</html>

但是当我在浏览器中运行文件时，我得到输出：

enter image description here

如何才能完全打开标签以显示表单？

Answer 1

您似乎尚未在html页面中链接该插件。确保您在query

之后添加了它

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
//you're missing this.

Answer 2

我想你忘了包含jquery.tabSlideOut.js。查看示例代码here以及以下行：

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

Answer 3

您的所有脚本和样式都应该位于html的头部。请安排好

<html>
    <head>
<script src='jquery-1.10.1.min.js'></script> // this file is in the same folder.
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                              //class of the element that will be your tab
    pathToTabImage: 'contact_tab.gif',                  //path to the image for the tab *required*
    imageHeight: '122px',                               //height of tab image *required*
    imageWidth: '40px',                               //width of tab image *required*    
    tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                        //speed of animation
    action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
    topPos: '200px',                                   //position from the top
    fixedPosition: false                               //options: true makes it stick(fixed position) on scroll
});
});

</script>
<style>
    .slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}
</style>
    </head>
    <body>
        <div class="slide-out-div">
            <a class="handle" href="http://link-for-non-js-users">Content</a>
            <h3>This is extra content</h3>
            <p>Something that wasn't important enough to be in your main body, 
           but that you wanted to hide off the side of your screen for some reason.
            </p>
            <p>Could be a form to submit feedback, or contact info</p>
        </div>
    </body> 
</html>

Object不支持属性或方法'<tabslideout>'错误</tabslideout>

3 个答案: