1

我正在尝试实现与此类似的东西。

该图像将来自提要网址，我不确定如何防止它们在新窗口中打开，这是我目前所拥有的：

Javascript：

jquery/1.3.2/jquery.min.js

<script type="text/javascript">
    jQuery(function($){
        $('#more-views a').click(function(){
            $('#main-image img').fadeOut('slow').delay(2000).remove();
            //$('#main-image').append('&lt;img src="' + $(this).attr('href') + '" alt="" style="display:none;" /&gt;');

            $('#main-image').append('<img src="' + $(this).attr('data') + '" alt="" style="display:none;" />');
            $('#main-image img').fadeIn('slow');
            return false;
        });
    });
</script>

HTML

<div id="more-views">
    <a data="http://www.domain.com/image1.jpg"> 1 Day</a>
    <a data="http://www.domain.com/image2.jpg"> 5 Days</a>
    <a data="http://www.domain.com/image3.jpg"> 1 Month</a>
</div>


<div id="main-image">
    <img src="http://www.domain.com/image1.jpg" alt="1d" />
</div>

请帮忙！谢谢！

4

1 回答 1

1

尝试在你的 JavaScript 中添加一行来测试它是否会添加段落标签。如果是这样，您可能会遇到图像的 url 而不是此处的代码的问题。

jQuery(function($){
    $('#more-views a').click(function(){
        $('#main-image p').fadeOut('slow').delay(2000).remove();
//-------v add this line for testing
        $('#main-image').append('<p>' + $(this).attr('href') + '</p>);

        $('#main-image').append('<img src="' + $(this).attr('href') + '" alt="" style="display:none;" />');
        $('#main-image p').fadeIn('slow');
        return false;
    });
});

==较旧==

好的，我想我现在明白你的问题了。不要让你的<a>标签有一个href属性，而是使用一个data属性。

所以你的锚标签应该是这样的：

<a data='domain.com/image1.jpg'>image1</a>

然后你需要替换你的两个 JavaScript 行：

$('#main-image').append('&lt;img src="' + $(this).attr('href') + '" alt="" style="display:none;" /&gt;');

变成：

$('#default-market-chart').append('<img src="' + $(this).attr('data') + '" alt="" style="display:none;" />');

而且，您必须将#main-imageJavaScript 中的所有实例替换为#default-market-chart，因为您似乎没有带有 和 id 的元素main-image

==旧==

尝试将&lt;and&gt;替换为<and >，这样您的网页就会将您提供给它的字符串视为 HTML 标记，而不仅仅是字符串。

于 2013-05-15T14:33:37.660 回答