JQuery 工具可滚动：无法将超链接添加到图像

Posted 2023-05-07

【中文标题】JQuery 工具可滚动：无法将超链接添加到图像

【英文标题】：JQuery Tools Scrollable: impossible to add hyperlink to image

【发布时间】：2011-03-06 20:56:57

【问题描述】：

我想使用 Jquery Tools Scrollable 插件创建一个“画廊”幻灯片。 但是不可能添加像这样的标签 <a href='something'><img src='myimage' /> </a>

特别是如果我只使用<img> 标签，它会很好地工作..但是如果我在“a href”标签之前“附加”它将停止工作......

有人知道为什么吗？或者任何人都可以建议我最适合我的问题的解决方案或控制？

谢谢

编辑

CSS 代码： /* 可滚动的根元素。 当滚动发生时，这个元素保持静止。 */ .scrollable

/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;

/* custom decorations */
border:1px solid #ccc;
background:url(/img/global/gradient/h300.png) repeat-x;

/* 可滚动项目的根元素。必须绝对定位 它应该有一个非常大的宽度来容纳可滚动的项目。 设置根元素的宽度和高度就足够了 不适用于这个元素。 / .scrollable .items / 这个不能太大 */ 宽度：20000em； 位置：绝对； 明确：两者；

.items div 向左飘浮; 宽度：680px；

/* 单个可滚动项 */ .scrollable img 向左飘浮; 边距：20px 5px 20px 21px； 背景颜色：#fff; 填充：2px； 边框：1px 实心#ccc； 宽度：100 像素； 高度：75px;

-moz-border-radius:4px;
-webkit-border-radius:4px;

/* 活动项目 */ .scrollable .active 边框：2px 实心 #000; 位置：相对； 光标：默认；

/* 导航器的位置和尺寸 */ .navi 左边距：328px； 宽度：200px； 高度：20px；

/* 导航器内的项目 */ .navi 一个 宽度：8px； 高度：8px； 向左飘浮; 边距：3px； 背景：url（/images/navigator.png）0 0不重复； 显示：块； 字体大小：1px；

/* 鼠标悬停状态 */ .navi a:悬停 背景位置：0 -8px;

/*活动状态（当前页面状态）*/ .navi a.active 背景位置：0 -16px;

html：

  <!-- "previous page" action -->
        <a class="prev browse left">Prev.</a>
        <!-- root element for scrollable -->
        <div class="scrollable">
            <!-- root element for the items -->
            <div class="items">                                        
                <a href='/annuncio.aspx?idannuncio=13' border='0'><img src='/fotoannunci/13-1.jpg' class='ResizeFotoSmall' /></a> 

            </div>
        </div>
        <!-- "next page" action -->
        <a class="next browse right">Next</a>

【参考方案1】：

jQuery Tools Scrollable 插件基本上可以使用您想要的任何标记。听起来您在设置可滚动选项以及一些时髦的 CSS 和/或标记时遇到了问题。

尝试将可滚动元素包装在包含 div 中，并为其命名（例如“ScrollableItem”）。这些项目需要是您在可滚动构造函数中指定为“项目”属性的元素的子元素。例如，让 containsng 元素的类名称为“ScrollableItems” 看看下面的可滚动的 javascript：

$('.Scrollable').scrollable(
        items: '.ScrollableItems'
);

查看相应的标记（示例）：

<div class="Scrollable">
<div class="ScrollableItems">
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
</div>
</div>

CSS（示例）：

.Scrollable 
      height:166px; /* example */
      overflow:hidden;


.ScrollableItems 
      position:absolute;
      width:20000em;

您需要自己的 CSS 规则和额外的可滚动 javascript 参数才能使您的特定项目正常工作，但可滚动工具几乎可以使用任何语义正确的标记。

我还会看看他们的示例以及他们的 API here。

让我知道进展如何。 橡子

【参考方案2】：

jQuery 方法 .append() ( http://api.jquery.com/append/ ) 不包装其他元素。而是尝试查看.wrap() (http://api.jquery.com/wrap/)

【讨论】：

在这种情况下，他不需要使用 javascript 来包装任何东西。相反，只需使用标记。