小编tsa*_*and的帖子

适用于多个元素的功能

HTML:

<div class="container-fluid">
<div class="sidebar">
    <ul class="pills">  
        <li id="l1"><a id="link1">Lesson 1</a></li> <hr>
        <li id="l2"><a href="#" >Lesson 2</a></li> <hr>
        <li id="l3"><a href="#" >Lesson 3</a></li> <hr> 
    </ul>
   <div class="span16" id="target">
</div>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

$('#l1').click(function(){
    $('#target').fadeOut('fast', function(){
        $('#target').load("lesson/lesson1.html", function(){
                $('#target').fadeIn('slow');

                });
            });

        });
Run Code Online (Sandbox Code Playgroud)

我的网页中有5个链接,我想知道是否有任何一个代码而不是复制+粘贴多次.

html javascript jquery

1
推荐指数
1
解决办法
519
查看次数

动态添加基于id标签的图片

所以我有像这样的照片

在此输入图像描述

他们有相应的id标签.当你点击其中一个时,他们会弹出一个弹出窗口:

在此输入图像描述

这个javascript加载的:

google.setOnLoadCallback(function() 
{
    $('div.recentbox').click(function()
    {
        var name = $(this).attr('id');

        $('#titlethumb').prepend('<img class="imgs" src="stuff/"+name+"/thumbnail.jpg" />');
        $('.box-inner').fadeOut('fast',function()
        {
            $('.box-inner').load('stuff/'+name+'/description.html', function()
            {
                $('.box-inner').fadeIn('slow');
            });
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

description.html

<div id="infobox-wrap">
    <div id="infobox">
        <div id="titlethumb">
            <h2 class="infobox">linkur.com</h2>
            <img id="imgs" src=""> <!--this image should be found in stuff/linkur/thumbnail.jpg-->
        </div>

        <div id="descriptionbuttons">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut leo quis ante sagittis volutpat ut quis dolor. Vivamus ut leo ut erat pellentesque imperdiet nec eget turpis. Nunc sit amet elit …
Run Code Online (Sandbox Code Playgroud)

html javascript css

1
推荐指数
1
解决办法
54
查看次数

标签 统计

html ×2

javascript ×2

css ×1

jquery ×1