1

单击选项卡式菜单中的链接时，我需要的图像应该出现在我想要所有链接数量的位置...这是我用于示例的代码...它对我不起作用...我需要知道正确答案...帮帮我...

<html>
<head>
<title>image event</title>
<script type="text/javascript" ></script>
<style type="text/css">
#detail {
    width:320px;
    height:180px;
    margin-bottom:12px;
    border: 1px solid #000000;
}
#detail div {
    position:relative;
    width:100%;
    height:100%;
}
#detail div img {
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}
#detail div span {
    color:#ffffff;
    position:absolute;
    bottom:0;
    text-align:center;
    width:100%;
    background: #000000;
    opacity: .8;
    z-index:2;
}
#links img {
    width:30px;
    height:30px;
    margin-left:16px;
}
</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.js">

var container = $('#detail');
container.find('div:first-child').fadeIn("slow");
$('a').click(function () {
    var active = $(container.find('div')[$(this).prevAll('a').length]);
    active.siblings().hide();
    active.fadeIn("slow");
});
</script>

</head>
<body>
<div id="detail">
    <div id="div1" style="display:none">
        <span>CONTENT 1</span>
        <img src="images/1.jpg"/>
    </div>
    <div id="div2" style="display:none;">
        <span>CONTENT 2</span>
        <img src="images/2.jpg" />
    </div>
    <div id="div3" style="display:none">
        <span>CONTENT 3</span>
        <img src="images/3.jpg" />
    </div>
    <div id="div4" style="display:none">
        <span>CONTENT 4</span>
        <img src="images/4.jpg" />
    </div>
</div>
<div id="links">
        <a href="#" name="div1" ><img src="images/1.jpg" /></a>
        <a href="#" name="div2" ><img src="images/2.jpg" /></a>
        <a href="#" name="div3" ><img src="images/3.jpg" /></a>
        <a href="#" name="div4" ><img src="images/4.jpg" /></a>    
</div>
</body>
</html>
4

1 回答 1

0

我会尽量保持简单： 

<img id="image"/>
<button class="image-url" href="http://www.placehold.it/350x350/FFF">IMG 1</button>
<button class="image-url" href="http://www.placehold.it/350x350/EEE">IMG 1</button>
<button class="image-url" href="http://www.placehold.it/350x350/GGG">IMG 1</button>
<button class="image-url" href="http://www.placehold.it/350x350/DDD">IMG 1</button>

$('.image-url').on 'click', (ev)->
  # Edit: the fade effect
  $('#image').fadeOut('slow')
  $('#image').attr('src', $(this).attr('href'))​
  $('#image').fadeIn('slow')

小提琴

于 2012-11-10T11:56:47.570 回答