Question

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

<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>

Answer 1

我会尽量保持简单：

<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')

FIDDLE

单击选项卡式菜单中的链接时，是否需要图像才能显示在网页上？

1 个答案: