不同的UI元素

我正在做一個包含連續移動這裏圖像的DIV是代碼不同的UI元素

<div class="carousel"> 
<ul id='country'> 
    <li><img src="http://placehold.it/60x60&text=IND" alt='country' style=" border-radius: 5px;height:50px;cursor: pointer" onclick="openind()"/></li> 
    <li><img src="http://placehold.it/60x60&text=US" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=SA" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=UK" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=GRE" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=PO" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=PAK" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=ARG" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=NZ" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=AUS" alt='country' style=" border-radius: 5px;height:50px"/></li> 
</ul> 
    <ul id='ind' style=" display: none"> 
    <li><img src="http://placehold.it/60x60&text=WB" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=JH" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=UP" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=BI" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=UK" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=MH" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=MP" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=KA" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=KL" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=TN" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=AP" alt='country' style=" border-radius: 5px;height:50px"/></li> 
    <li><img src="http://placehold.it/60x60&text=AM" alt='country' style=" border-radius: 5px;height:50px"/></li> 
</ul> 
<div class="left-arrow carrow"></div> 
<div class="right-arrow carrow"></div>

在這裏，在第一UL如果我點擊圖像IND，那麼這些ul元素必須消失，並且必須出現下一個ul元素。問題在於，即使在單擊按鈕之前，第二個ul的圖像也會與第一個ul的圖像一起出現。當我點擊IND的時候也是如此。

這裏是鏈接http://jsfiddle.net/adeete/bjyuA/21/

請幫助。

功能隱藏第一UL和顯示第二UL

function openind() 
{ 
    document.getElementById('country').style.display='none'; 
    document.getElementById('ind').style.display='block'; 
}

來源

2017-04-03 ani

不知道你想要什麼來實現的，但我做了一些更新到你的提琴以實現IND點擊圖片。 http://jsfiddle.net/depaule/bjyuA/24/ –

我想要的是作爲第一個ul是一個移動continuoslly.It包含一個li IND，如果我點擊那個然後第二個ul應該替換第一個ul，即第一個ul應該消失，第二個ul的元素應該是移動的那一個 – ani

而且仍然是同樣的事情發生。相反，它現在更新後發生更多。我的意思是現在所有的元素都是ul出現兩次 – ani

的問題是您選擇從兩個ul一切都li。您需要進行具體更改。

首先添加display: block到country UL

<ul id='country' style="display: block">

下一頁更改ul選擇在myAnimate功能這樣

var $ul = $carousel.children('ul[style^="display: block"]');

注：以上你的風格選擇應該出現在你設置同樣的方式。目前您的空間介於:和block之間。所以這個必須堅持到處。

編輯：更新小提琴這裏：http://jsfiddle.net/marudhupandiyang/bjyuA/25/

來源

2017-04-03 21:36:43 Panther

非常感謝。由於缺乏聲譽，我無法向您提供答案。但非常感謝。 – ani

回答

相關問題