Home  >  Article  >  Web Front-end  >  How to achieve the effect shown in the picture below_html/css_WEB-ITnose

How to achieve the effect shown in the picture below_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:17:35979browse

I would like to ask how to achieve the effect shown in the picture below. Select the name in the left frame and click the ">>" button. The selected name will automatically appear in the right frame and disappear in the left frame.


Reply to the discussion (solution)

Two ListBox plus Hidden plus Js, there should be a lot of code online for Js operation ListBox

In fact, delete one on the left element, add an element on the right

Two ListBox plus Hidden plus Js, there should be a lot of code online for Js to operate ListBox
It seems that there is no listbox tag in HTML, right? ? ? ?

As a side note, I want to use HTML to implement

which is effective but not beautiful. . . .




Untitled Document



$(document).ready(function(){
var s = "";
var g = "";
$("#toRight").click(function(){
if(s!==""&&s!=null&&g=="left"){
$(".right").append(s);
$("p").removeClass( "select");
}
});
$("#toLeft").click(function(){
if(s!==""&&s!=null&&g==" right"){

$(".left").append(s);
$("p").removeClass("select");
}
});
$("p").click(function(){
$("p").removeClass("select");
$(this).addClass("select")
s = $(this);
g = $(this).parent().attr("class");
});
});









"right">
                                                                 ;/div>

id="toLeft"/>





It is effective, but not beautiful. . . .


Very good, thank you very much

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn