Форум

porezon · #1 (**permalink**) 19.07.2016, 00:02

Есть 3 блока, которые переключаются на JS. и когда переключаешь между вкладками должен менятся

leftname2 на leftname2 active

в данном коде все работает, но переключение почему-то происходить только после 3-4 кликов по этим вкладкам...

помогите решить что бы сразу переключало

var current = 'page1';
function show(id){

$(".artmenu").find("div").click(function(){
  // удаляем у старого элемента, класс   activeClass    
  $(".artmenu .leftname2").removeClass("active");

  // добавляем к ссылки по которой щёлкнули класс activeClass
  $(this).addClass("active");
});

	document.getElementById(current).style.display = 'none';
	document.getElementById(id).style.display = 'block';
	current = id;
}

<div class="artmenu">
<div class="leftname2 active" onclick="show('page1'); return false;">Новые</div>
<div class="leftname2" onclick="show('page2'); return false;">Обсуждаемые</div>
<div class="leftname2" onclick="show('page3'); return false;">Интересные</div>
</div>
<div class='menuleft' style='margin-top:-31px;'>
<div id="page1" class="contextlink0">
<a href='/forum_topic_view.php?gr=22'>пыв ыв<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=18'>twq<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=17'>gsdsd<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=16'>gsdg<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=15'>gdgsdg<br />
<span>Дата добавления: 18.07.2016</span></a>
</div>

<div id="page2" class="contextlink0">
<a href='/forum_topic_view.php?gr=1'>Открытие сайта! Очень скоро<br />
<span>Комментариев: 4</span></a>
<a href='/forum_topic_view.php?gr=2'>111111111111<br />
<span>Комментариев: 3</span></a>
<a href='/forum_topic_view.php?gr=11'>Nowclick-bux (( на основе profitcentr ))<br />
<span>Комментариев: 1</span></a>
<a href='/forum_topic_view.php?gr=7'>Директ расширил шкалу коэффициентов в корректировках ставок от -100 до +1200%<br />
<span>Комментариев: 0</span></a>
<a href='/forum_topic_view.php?gr=8'>Google поделился информацией о статусе обновления Penguin<br />
<span>Комментариев: 0</span></a>
</div>

<div id="page3" class="contextlink0">
<a href='/forum_topic_view.php?gr=1'>Открытие сайта! Очень скоро<br />
<span>Просмотров: 43</span></a>
<a href='/forum_topic_view.php?gr=2'>111111111111<br />
<span>Просмотров: 30</span></a>
<a href='/forum_topic_view.php?gr=10'>В DuckDuckGo появился фильтр по датам и быстроссылки<br />
<span>Просмотров: 13</span></a>
<a href='/forum_topic_view.php?gr=8'>Google поделился информацией о статусе обновления Penguin<br />
<span>Просмотров: 12</span></a>
<a href='/forum_topic_view.php?gr=9'>Pinterest сменил название кнопки «Pin It» на «Сохранить»<br />
<span>Просмотров: 12</span></a>
</div>
</div>

рони · #2 (**permalink**) 19.07.2016, 00:16

porezon,
две сотни примеров на форуме того что вы просите ... кодовое слово Открывашка

рони · #3 (**permalink**) 19.07.2016, 00:47

porezon,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active {
    background-color: #A9A9A9;
    border-radius: 6px;
    text-align: center;
  }
.artmenu .leftname2{
   width: 150px ;  margin:  auto 14px; display: inline-block;
}

.contextlink0{
    display: none;
}
.contextlink0:nth-child(1){
   display: block;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$left = $(".leftname2"), $contex = $(".contextlink0");
$left.on("click", function() {
$left.not($(this).toggleClass("active")).removeClass("active");
var i = $left.index(this);
$contex.not($contex.eq(i).toggle()).hide()
})

});
  </script>
</head>

<body>
<div class="artmenu">
<div class="leftname2 active" >Новые</div>
<div class="leftname2" >Обсуждаемые</div>
<div class="leftname2" >Интересные</div>
</div>
<div class='menuleft' >
<div id="page1" class="contextlink0">
<a href='/forum_topic_view.php?gr=22'>пыв ыв<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=18'>twq<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=17'>gsdsd<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=16'>gsdg<br />
<span>Дата добавления: 18.07.2016</span></a>
<a href='/forum_topic_view.php?gr=15'>gdgsdg<br />
<span>Дата добавления: 18.07.2016</span></a>
</div>

<div id="page2" class="contextlink0">
<a href='/forum_topic_view.php?gr=1'>Открытие сайта! Очень скоро<br />
<span>Комментариев: 4</span></a>
<a href='/forum_topic_view.php?gr=2'>111111111111<br />
<span>Комментариев: 3</span></a>
<a href='/forum_topic_view.php?gr=11'>Nowclick-bux (( на основе profitcentr ))<br />
<span>Комментариев: 1</span></a>
<a href='/forum_topic_view.php?gr=7'>Директ расширил шкалу коэффициентов в корректировках ставок от -100 до +1200%<br />
<span>Комментариев: 0</span></a>
<a href='/forum_topic_view.php?gr=8'>Google поделился информацией о статусе обновления Penguin<br />
<span>Комментариев: 0</span></a>
</div>

<div id="page3" class="contextlink0">
<a href='/forum_topic_view.php?gr=1'>Открытие сайта! Очень скоро<br />
<span>Просмотров: 43</span></a>
<a href='/forum_topic_view.php?gr=2'>111111111111<br />
<span>Просмотров: 30</span></a>
<a href='/forum_topic_view.php?gr=10'>В DuckDuckGo появился фильтр по датам и быстроссылки<br />
<span>Просмотров: 13</span></a>
<a href='/forum_topic_view.php?gr=8'>Google поделился информацией о статусе обновления Penguin<br />
<span>Просмотров: 12</span></a>
<a href='/forum_topic_view.php?gr=9'>Pinterest сменил название кнопки «Pin It» на «Сохранить»<br />
<span>Просмотров: 12</span></a>
</div>
</div>

</body>
</html>

Rasy · #4 (**permalink**) 19.07.2016, 01:13

рони,

porezon · #5 (**permalink**) 19.07.2016, 08:40

рони Все отлично спасибо, но 1 момент есть, если нажать на тот класс который активный уже, он становится не активный =(

рони · #6 (**permalink**) 19.07.2016, 09:52

porezon,

~~toggleClass~~ addClass
~~toggle()~~ show()

Форум

Справочник

Discord чат

Курсы javascript