Форум

karakym · #1 (**permalink**) 19.09.2016, 14:12

Значит есть 5 ссылок <a> с href'ами типа #main, #about и т.д.
Есть 5 <section> с id типа main, about и т.д.
Задача: по нажатию на <a> проверить его href и изменить z-index на "6"
Цикл нужен для того, что бы z-index:6; было только у одного "активного" <section>, а остальным дать на 1 меньше, то есть 5.
Пробовал так:

$("nav a").click(function () {
	var href = $(this).attr("href");
	var page = $(href);
	//page.css("z-index","6");
	page.each(function (i) {
		if(page.css("zIndex") > 5) {
			page.css("zIndex","5");
		} else {
			page.css("zIndex","6");
		}
	});
});

Но белеберда выходит

karakym · #2 (**permalink**) 19.09.2016, 14:16

Вот сама страница с кодом
http://bplus.advokat-alekseenko.dp.ua/test/

warren buffet · #3 (**permalink**) 19.09.2016, 14:22

Сообщение от karakym

Цикл нужен для того

Цикл не нужен.

warren buffet · #4 (**permalink**) 19.09.2016, 14:33

А через z-index разве такую хрень делают? Просто включай 1 секцию display="block". Ну, не важно. Цикл не нужен, нужно просто запомнить активный элемент

var theActivePage=null;

$("nav a").click(function () {
	var href = $(this).attr("href");

	if(theActivePage)
		theActivePage.css("zIndex",5);

	theActivePage = $(href);
	theActivePage.css("zIndex",6);

});

С глобальным скопом theActivePage сам разбирайся, я хз эту байду жикверь.

warren buffet · #5 (**permalink**) 19.09.2016, 14:35

И применительно к оптимизации-индексации у тебя знаешь что получится? Одностраничник.

Manyasha · #6 (**permalink**) 19.09.2016, 14:55

Может так?

<!doctype html>
<html lang="ru-RU">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="HandheldFriendly" content="true">
  <title>Default Page Title</title>
  <!--<link rel="shortcut icon" href="img/favicon.ico">
  <link rel="icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/responsive.css"/>-->
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/base.css"/>
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/style.css"/>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <aside>
    <nav>
      <a href="#main">Главная<i class="icon">&#xe800;</i></a>
      <a href="#about">О нас<i class="icon">&#xf27a;</i></a>
      <a href="#revs">Отзывы<i class="icon">&#xe809;</i></a>
      <a href="#adrs">Адреса<i class="icon">&#xf277;</i></a>
      <a href="#feed">Контакты<i class="icon">&#xe808;</i></a>
    </nav>
  </aside>
  <div id="sections">
	  <section id="main">
		<h1>Главная</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="about">
		<h1>О нас</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="revs">
		<h1>Отзывы</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="adrs">
		<h1>Адреса</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="feed">
		<h1>Контакты</h1>
		<h2>This is main page</h2>
	  </section>
  </div>
	<script type="text/javascript" src="http://bplus.advokat-alekseenko.dp.ua/test/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    $("nav a").click(function () {
        var href = $(this).attr("href");
        $("#sections>section").hide();
        $(href).show();
    });
    </script> 
</body>
</html>

karakym · #7 (**permalink**) 19.09.2016, 15:06

Мне важно что бы можно было управлять css transition переходами между <section>

karakym · #8 (**permalink**) 19.09.2016, 15:10

Сообщение от warren buffet

у тебя знаешь что получится?

Знаю, знаю. Это цель проекта.

Сообщение от Manyasha

Может так?

Спасибо, это помогло. Есть ли способ управлять с помощью transition ?

Manyasha · #9 (**permalink**) 19.09.2016, 15:57

karakym,
так хотите?

<!doctype html>
<html lang="ru-RU">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="HandheldFriendly" content="true">
  <title>Default Page Title</title>
  <!--<link rel="shortcut icon" href="img/favicon.ico">
  <link rel="icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/responsive.css"/>-->
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/base.css"/>
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/style.css"/>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
section {
  transition: opacity 1s;
  opacity: 0;
}
section:first-child {
  opacity: 1;
}
</style>
</head>
<body>
  <aside>
    <nav>
      <a href="#main">Главная<i class="icon">&#xe800;</i></a>
      <a href="#about">О нас<i class="icon">&#xf27a;</i></a>
      <a href="#revs">Отзывы<i class="icon">&#xe809;</i></a>
      <a href="#adrs">Адреса<i class="icon">&#xf277;</i></a>
      <a href="#feed">Контакты<i class="icon">&#xe808;</i></a>
    </nav>
  </aside>
  <div id="sections">
	  <section id="main">
		<h1>Главная</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="about">
		<h1>О нас</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="revs">
		<h1>Отзывы</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="adrs">
		<h1>Адреса</h1>
		<h2>This is main page</h2>
	  </section>
	  <section id="feed">
		<h1>Контакты</h1>
		<h2>This is main page</h2>
	  </section>
  </div>
	<script type="text/javascript" src="http://bplus.advokat-alekseenko.dp.ua/test/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    $("nav a").click(function () {
        var href = $(this).attr("href");
        $("#sections>section").css("opacity", 0);
        $(href).css("opacity", 1);
    });
    </script> 
</body>
</html>

рони · #10 (**permalink**) 19.09.2016, 15:59

karakym,

<!doctype html>
<html lang="ru-RU">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="HandheldFriendly" content="true">
  <title>Default Page Title</title>
  <!--<link rel="shortcut icon" href="img/favicon.ico">
  <link rel="icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/responsive.css"/>-->
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/base.css"/>
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/style.css"/>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">
#sections>section{
  transition: all 0.8s;
  opacity: 0;
}
#sections>section:first-child{
  opacity: 1;
}
</style>
</head>
<body>
  <aside>
    <nav>
      <a href="#main">Главная<i class="icon">&#xe800;</i></a>
      <a href="#about">О нас<i class="icon">&#xf27a;</i></a>
      <a href="#revs">Отзывы<i class="icon">&#xe809;</i></a>
      <a href="#adrs">Адреса<i class="icon">&#xf277;</i></a>
      <a href="#feed">Контакты<i class="icon">&#xe808;</i></a>
    </nav>
  </aside>
  <div id="sections">
    <section id="main">
    <h1>Главная</h1>
    <h2>This is main page</h2>
    </section>
    <section id="about">
    <h1>О нас</h1>
    <h2>This is main page</h2>
    </section>
    <section id="revs">
    <h1>Отзывы</h1>
    <h2>This is main page</h2>
    </section>
    <section id="adrs">
    <h1>Адреса</h1>
    <h2>This is main page</h2>
    </section>
    <section id="feed">
    <h1>Контакты</h1>
    <h2>This is main page</h2>
    </section>
  </div>
  <script type="text/javascript" src="http://bplus.advokat-alekseenko.dp.ua/test/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $("nav a").click(function (event) {
        event.preventDefault()
        var href = $(this).attr("href");
        $("#sections>section").css("opacity", function() {
   return this == $(href)[0] ? 1 : 0
});

    });    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript