Question

Here is my code, two HTML files, one JS and one CSS. What I want is when I click on the anchor tag in page1.html, then remove div .orange from the destination page slider.html.

page1.html

<body>    
    <a  class="slider" href="slider.html"> goto slider </a>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
</body>

slider.html

<body>
    <a class="page1" href="page1.html"> goto page1 </a>
    <div class="green"></div>
    <div class="orange"></div>
    <div class="black"></div>
</body>

css

.red,.blue,.yellow,.green,.orange,.black {
    width: 100%;
    height: 150px;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.yellow{
    background: yellow;
}
.green{
    background: green;
}
.orange{
    background: orange;
}
.black {
    background: black;
}

js

$(document).ready(function(){
    $('body').on('click','.slider',function(){
        console.log('clicked');
        $('.orange').remove();
    });
});

give me some direction how can we communicate between two html files or how can we reload script after destination page loading is complete

i tried window.onload and document.ready but they are only works in current page not affecting in destination page,

thanks in advance.

当我单击<a> tag

0 个答案: