How to give border-left none to the first visible child of the list?
I want to create something like this
but i have the following
how can i give border-left: none to the first visible child element?
I cannot create the same example, but you can get the Idea from my jsFiddle .
<body onload='getAllListItems()'>
<div id='t'>
<button id='left' onClick="move(left)">
<</button>
<div id='list'>
<ul id='list-items'>
<li class="list">slide1</li>
<li class="list">slide2</li>
<li class="list">slide3</li>
<li class="list">slide4</li>
<li class="list">slide5</li>
<li class="list">slide6</li>
<li class="list">slide7</li>
<li class="list">slide8</li>
<li class="list">slide9</li>
<li class="list">slide10</li>
<li class="list">slide11</li>
</ul>
</div>
<button id='right' onClick='move(right)'>></button>
</div>
</body>
ul {
float:left;
height:50px;
width: 800px;
overflow: hidden;
}
#t{
background-color:#f16f00;
border: 1px #ffffff solid;
}
ul li {
border-left: 1px solid;
border-left-color: #f16f00;
color: #ffffff;
text-align: center;
width: 100px;
height: 50px;
float: left;
list-style-type: none;
background-color:#032258;
padding-top: 0;
padding-bottom: 0;
}
ul li:first-child {
display: block;
}
#left, #right {
float:left;
height:50px;
background-color:aqua;
font-size:2em;
padding-left: 20px;
padding-right:20px;
}
var list_items = [];
var index = 0;
var list_length = 0;
function getAllListItems() {
var temp = document.getElementsByClassName('list');
console.log(temp);
for (i = 0; i < temp.length; i++) {
list_items.push(temp[i]);
}
list_length = temp.length;
}
getAllListItems();
function move(dir) {
if (dir === left) {
var k = index + 1;
console.log('i:'+index);
console.log('k:'+k);
list_items[index].style.display = 'block';
list_items[index].style.border = 'none';
index--;
list_items[k].style.borderleft = '1px solid #425982';
if (index < 0) {
index = 0;
}
} else if (dir === right) {
list_items[index].style.display = 'none';
if (index >= ((list_length) - 1)) {
index = (list_length) - 1;
} else {
index++;
}
} else {
}
}
+3
source to share
1 answer
ul li:first-child {
display: block;
border-left:0px solid red;
}
You already have a class named
ul li:first-child
just addborder-left:0px solid red;
to it.
Please excuse the below code for the answer you need. Your question was not good enough to understand in one shoot
var list_items = [];
var index = 0;
var list_length = 0;
function getAllListItems() {
var temp = document.getElementsByClassName('list');
console.log(temp);
for (i = 0; i < temp.length; i++) {
list_items.push(temp[i]);
}
list_length = temp.length;
}
getAllListItems();
function move(dir) {
if (dir === left) {
var k = index + 1;
console.log('i:'+index);
console.log('k:'+k);
list_items[index].style.display = 'block';
list_items[index].style.borderLeft = 'none';
index--;
list_items[k].style.borderLeft = '1px solid #f16f00';
if (index < 0) {
index = 0;
}
} else if (dir === right) {
list_items[index].style.display = 'none';
list_items[index+1].style.borderLeft = '0px solid red';
if (index >= ((list_length) - 1)) {
index = (list_length) - 1;
} else {
index++;
}
} else {
}
}
ul {
float:left;
height:50px;
width: 800px;
overflow: hidden;
}
#t{
background-color:#f16f00;
border: 1px #ffffff solid;
}
ul li {
border-left: 1px solid;
border-left-color: #f16f00;
color: #ffffff;
text-align: center;
width: 100px;
height: 50px;
float: left;
list-style-type: none;
background-color:#032258;
padding-top: 0;
padding-bottom: 0;
}
ul li:first-child {
display: block;
border-left:0px solid red;
}
#left, #right {
float:left;
height:50px;
background-color:aqua;
font-size:2em;
padding-left: 20px;
padding-right:20px;
}
<body onload='getAllListItems()'>
<div id='t'>
<button id='left' onClick="move(left)">
<</button>
<div id='list'>
<ul id='list-items'>
<li class="list">slide1</li>
<li class="list">slide2</li>
<li class="list">slide3</li>
<li class="list">slide4</li>
<li class="list">slide5</li>
<li class="list">slide6</li>
<li class="list">slide7</li>
<li class="list">slide8</li>
<li class="list">slide9</li>
<li class="list">slide10</li>
<li class="list">slide11</li>
</ul>
</div>
<button id='right' onClick='move(right)'>></button>
</div>
</body>
Chnages in you css
ul li:first-child {
display: block;
border-left:0px solid red;
}
Changing your JS
function move(dir) {
if (dir === left) {
var k = index + 1;
console.log('i:'+index);
console.log('k:'+k);
list_items[index].style.display = 'block';
list_items[index].style.borderLeft = 'none';
index--;
list_items[k].style.borderLeft = '1px solid #f16f00';
if (index < 0) {
index = 0;
}
} else if (dir === right) {
list_items[index].style.display = 'none';
list_items[index+1].style.borderLeft = '0px solid red';
if (index >= ((list_length) - 1)) {
index = (list_length) - 1;
} else {
index++;
}
} else {
}
}
+5
source to share