Javascript-форум - можно ли изменить цвет ссылок? и одну ссылку заменить на текст?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - можно ли изменить цвет ссылок? и одну ссылку заменить на текст? (https://javascript.ru/forum/misc/76934-mozhno-li-izmenit-cvet-ssylok-i-odnu-ssylku-zamenit-na-tekst.html)

Цитата:

Сообщение от Блондинка

я же хочу чтобы по умолчанию при загрузке страницы уже было "прокрученно"

Чтобы такое заработало, вам нужно добавить p.scrollIntoView();

Было...

p.innerHTML = link.innerHTML;
	link.parentNode.replaceChild(p, link);
} else {
	link.className = classes[level];

Стало...

p.innerHTML = link.innerHTML;
	link.parentNode.replaceChild(p, link);
	p.scrollIntoView();
} else {
	link.className = classes[level];

Malleys,
не подскажешь как правильно совместить

Цитата:

Сообщение от Malleys (Сообщение 505664)

Можно тень сделать вокруг области при помощи функции drop-shadow свойства filter, но я думаю, вдруг вам потребуется залить картинку туда...

Можно ещё сделать так...

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
	<style>
		svg {
			width: 300px;
			height: 120px;
		}
	</style>
	<svg viewBox="-5 -5 310 130">
		<style>
			path {
				stroke: #f06;
				stroke-width: 10px;
				fill: none;
			}
		</style>
		<path d="M 0 0 L 300 0 L 300 100 L 150 120 L 0 100 z"></path>
	</svg>
</body>

</html>

с ссылками из <div id="menu2">

<!DOCTYPE html>
<html>
<head>
	<title>transform</title>
	<style>
		body { font: 14px normal Times, serif; position: relative; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { text-decoration: none; } 
		a:active, a:link { color: #005aff; } 
		a:visited { color: #5995ff; } 
		a:hover { color: #7a00ff; }
		.act { color: #f0f0f0; text-shadow: 1px 1px #009900, 1px -1px #009900, -1px 1px #009900, -1px -1px #009900, 1px 0px #009900, -1px 0px #009900, 0px 1px #009900, 0px -1px #009900; }
		a.efg:active, a.efg:link { color: #167016; }
		a.def:active, a.def:link { color: #127a12; }
		a.cde:active, a.cde:link { color: #0d850d; }
		a.bcd:active, a.bcd:link { color: #068f06; }
		a.abc:active, a.abc:link { color: #009900; }
                #menu1 { height: 30px; overflow-x: scroll; white-space: nowrap; }
                #menu2 { height: 40px; overflow-x: scroll; white-space: nowrap; border: 1px solid transparent; border-top-color: #999; }
                #menu1 a { width: 23%; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
                #menu2 a { width: 18%; height: 29px; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #999; border-radius: 8px 8px 0 0 / 5px 5px 0 0; margin: 0 0 2px; padding: 5px; }
                #menu3, #menu4, #menu5 { width: 212px; height: 160px; overflow-y: scroll; }
                #menu_right { width: 214px; border: none; position: absolute; right: 10px; margin-top: -10px; }
                #menu3 a, #menu4 a, #menu5 a, #menu5 .act  { width: 200px; display: block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
#link_one {  }
	</style>
<script src="/js/menu_big.js"></script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel_01/">razdel_01</a>
	<a href="/razdel_02/">razdel_02</a>
	<a href="/razdel_03/">razdel_03</a>
	<a href="/razdel_04/">razdel_04</a>
	<a href="/razdel_05/">razdel_05</a>
	<a href="/razdel_06/">razdel_06</a>
	<a href="/razdel_07/">razdel_07</a>
	<a href="/razdel_08/">razdel_08</a>
	<a href="/razdel_09/">razdel_09</a>
	<a href="/razdel_10/">razdel_10</a>
	</div>
	<div class="menu" id="menu2">
		<a href="/razdel_01/podrazdel_01/">podrazdel_01</a>
		<a href="/razdel_01/podrazdel_02/">podrazdel_02</a>
		<a href="/razdel_01/podrazdel_03/">podrazdel_03</a>
		<a href="/razdel_01/podrazdel_04/">podrazdel_04</a>
		<a href="/razdel_01/podrazdel_05/">podrazdel_05</a>
		<a href="/razdel_01/podrazdel_06/">podrazdel_06</a>
		<a href="/razdel_01/podrazdel_07/">podrazdel_07</a>
		<a href="/razdel_01/podrazdel_08/">podrazdel_08</a>
		<a href="/razdel_01/podrazdel_09/">podrazdel_09</a>
		<a href="/razdel_01/podrazdel_10/">podrazdel_10</a>
		<a href="/razdel_01/podrazdel_11/">podrazdel_11</a>
		<a href="/razdel_01/podrazdel_12/">podrazdel_12</a>
		<a href="/razdel_01/podrazdel_13/">podrazdel_13</a>
		<a href="/razdel_01/podrazdel_14/">podrazdel_14</a>
		<a href="/razdel_01/podrazdel_15/">podrazdel_15</a>
			</div>
		<div id="menu_right">
		<div class="menu" id="menu3">
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_01/">podpodrazdel_01</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_02/">podpodrazdel_02</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_03/">podpodrazdel_03</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_04/">podpodrazdel_04</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_05/">podpodrazdel_05</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_06/">podpodrazdel_06</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_07/">podpodrazdel_07</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_08/">podpodrazdel_08</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_09/">podpodrazdel_09</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_10/">podpodrazdel_10</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_11/">podpodrazdel_11</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_12/">podpodrazdel_12</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_13/">podpodrazdel_13</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_14/">podpodrazdel_14</a>
	 		<a href="/razdel_01/podrazdel_01/podpodrazdel_15/">podpodrazdel_15</a>
			</div>
			<div class="menu" id="menu4">
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/">podrazdel-a</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-b/">podrazdel-b</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-c/">podrazdel-c</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-d/">podrazdel-d</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-e/">podrazdel-e</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-f/">podrazdel-f</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-g/">podrazdel-g</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-h/">podrazdel-h</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-i/">podrazdel-i</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-j/">podrazdel-j</a>
			</div>
			<div class="menu" id="menu5">
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/01.html" id="link_one">page-01</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/02.html">page-02</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/03.html">page-03</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/04.html">page-04</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/05.html">page-05</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/06.html">page-06</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/07.html">page-07</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/08.html">page-08</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/09.html">page-09</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/10.html">page-10</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/11.html">page-11</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/12.html">page-12</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/13.html">page-13</a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/14.html">page-14 </a>
				<a href="/razdel_01/podrazdel_01/podpodrazdel_01/podrazdel-a/15.html">page-15</a>
</div>
</div>
</body>
</html>

Вот пример... http://malleys.lark.ru/menu1.html

Код смотрите тут... http://malleys.lark.ru/menu1.txt

наконец-то что то начинает вырисовываться на этой странице, только не получается залить цветом видимую часть и выровнять(поднять) по вертикали текст ссылок, и наверное надо указывать другие точки для обрезки ссылок

Цитата:

Сообщение от Блондинка

выровнять(поднять) по вертикали текст ссылок

Так я же в примере вам это исправил...

#menu2 a {
width: 170px;
height: 29px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 0 2px;
padding: 5px;
box-sizing: border-box; 
background-color: #f0f0f0;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="170" height="29" \
fill="none" stroke="#999" stroke-width="1px"> \
<path d="M 1 1 L 169 1 L 169 19 L 82.5 29 L 1 19 z"></path> \
</svg>'
);
background-repeat: no-repeat; 
}

сейчас так, но наверное надо

#menu2 a {
width: 170px;
height: 29px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 0 2px;
padding: 5px;
box-sizing: border-box; 
background-color: #f0f0f0;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="170" height="29" \
fill="none" stroke="#999" stroke-width="1px"> \
<path d="M 0 0 L 170 0 L 170 19 L 82.5 29 L 0 19 z"></path> \
</svg>'
);
background-repeat: no-repeat; 
}

Malleys,
вот часть твоего кода

#menu1 a {
			width: 150px;
			height: 40px;
			text-align: center;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 2px;
			padding: 5px;
			box-sizing: border-box;
			color: deeppink;
			background-image: url('data:image/svg+xml,\
				<svg xmlns="http://www.w3.org/2000/svg" \
					width="300" height="130" \
					fill="none" stroke="deeppink" stroke-width="2.5"> \
				<path d="M 5 5 L 145 5 L 145 30 L 72.5 35 L 5 30 z"></path> \
				</svg>'
			);
			background-repeat: no-repeat;
		}

окончательно использовала этот кусок кода

#menu2 { height: 39px; overflow-x: scroll; white-space: nowrap; border: 1px solid transparent; padding: 0 5px 0 5px; }
#menu1 a { width: 23%; text-align: center; display: inline-block; background: #f0f0f0; border: 1px solid #c0c0c0; border-radius: 8px/5px; margin: 0 0 2px; padding: 5px; }
#menu2 a {
width: 170px;
height: 40px;
text-align: center; 
vertical-align: 5px; 
border-radius: 8px 8px 0 0 /5px 5px 0 0; 
border-top: 1px solid #999;
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: -1px;
padding: 5px auto 15px;
box-sizing: border-box; 
background-color: #f0f0f0;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="170" height="39" \
fill="none" stroke="#999" stroke-width="1px"> \
<path d="M 0 0 L 170 0 L 170 29 L 85.5 38 L 0 29 z	"></path> \
</svg>'
);
background-repeat: no-repeat; 
}

на этой странице

Цитата:

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

Так я же в примере вам это исправил...

а можно на словах объяснить где я накосячила с вертикальным выравниванием и заливкой фона?

насколько я понимаю, чтобы более эстетичнее скруглить верхние углы надо указать массу точек для обрезки? или можно более культурно это сделать?

Никто не знает почему фон не обрезается?

Цитата:

Сообщение от Блондинка (Сообщение 505498)

ну точно, я угадала, все увидев меня срочно ретируются

неужели я была права?

Цитата:

Сообщение от Блондинка (Сообщение 506293)

Никто не знает почему фон не обрезается?

???

Malleys,
А если использовать

clip-path: poligon(0 0, 100% 0, 100% 90%, 50% 100%, 0 80%);

возможно ли совместить с бордер радиус для верхних прямых углов и у дива установить фон, а у нижних обрезанных углов обрезать и фон?

Цитата:

Сообщение от Блондинка

???

Что значит, что фон не обрезается? Вы можете использовать CSS-свойства clip-path или mask. Мощнейшие возможности по обрезанию! Также вас возможно заинтересует свойство shape-outside

UPD

Цитата:

Сообщение от Блондинка

Всё можно, если я правильно понял, то можно так... Зачем вы спрашиваете то, что и так знаете?

<div class="box"></div>
<style>

.box {
	width: 320px;
	height: 240px;
	background: linear-gradient(to bottom, transparent, red), url(https://picsum.photos/320/240) center / cover;
	border-radius: 1em;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
    
</style>

Malleys,
в 168 посте, как лучше и кроссбраузерно сделать?

<div class="box"></div>
<style>

.box {
	width: 320px;
	height: 240px;
	border: 5px solid #000;
        box-shadow: 5px 5px #000;
        background: linear-gradient(to bottom, transparent, red), url(https://picsum.photos/320/240) center / cover;
	border-radius: 1em;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
       clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
    
</style>

я то думала почему не обрезали, а про префиксы забыла...

Malleys,
как сделать бордер вокруг видимой области а не по всему блоку?

Цитата:

Сообщение от Блондинка

как сделать бордер вокруг видимой области а не по всему блоку?

border предназначен для работы с прямоугольной областью, как работать с любой областью я вам показывал полгода назад!

Предыдущий пример можно доделать так...

<div class="box"></div>
<style>

.box {
	width: 320px;
	height: 240px;
	background: yellowgreen;
	border-radius: 1em;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
	position: relative;
}

.box::before {
	all: inherit;
	content: "";
	display: block;
	transform: scale(0.9);
	background: url(https://picsum.photos/320/240) center / cover;
	position: absolute;
}
    
</style>

Если вам нужна более настраиваемая рамка, то используйте svg...

<style>
svg.box {
	width: 320px;
	height: 240px;
}
</style>
<svg viewBox="-5 -5 330 250" class="box">
	<style>
		path {
			stroke: tan;
			stroke-width: 10px;
			fill: url(#img1);
		}
	</style>
	<defs>
  		<pattern id="img1" patternUnits="userSpaceOnUse" width="320" height="240">
    			<image xlink:href="https://picsum.photos/320/240/" x="0" y="0" />
  		</pattern>
	</defs>
	<path d="M 20 0 h 280 a 20 20 0 0 1 20 20 v 190 l -160 30 l -160 -30 v -190 a 20 20 0 0 1 20 -20 z"></path>
</svg>

÷а ну нахфик, второй день пытаюсь что-то сделать, и нифига не получается,.. или радиус не совпадает у обоих верхних углов, или левый нормально а правый не совпадает, или фон у нижних углов не обрезается, или...
видно ничего не получится у меня...

Наконец-то получилось то что хотела, блок с серым фоном, и сделала даже лучше чем ожидала - блок с зелёным фоном

<!DOCTYPE html>
<html lang="ru">
<head>
<style>
.box {
width: 150px;
height: 50px;
display: inline-block;
background: #999;
border: 1px solid #999;
border-radius: 8px/5px; 
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block {
width: 148px;
height: 48px;
background: #e1e1e1;
border: 1px solid transparent;
border-radius: 7px/4px; 
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
text-align: center;
padding-top: 10px; }

.box_01 {
width: 150px;
height: 50px;
display: inline-block;
background: #008000;
border: 1px solid #008000;
border-radius: 8px/5px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block_01 {
width: 148px;
height: 48px;
background: #cfc;
border: 1px solid transparent;
border-radius: 7px/4px; 
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
text-align: center;
padding-top: 10px; }
</style>
</head>
<body>
<div class="box">
<div class="block">
<a>0001</a>
</div>
</div>
<div class="box_01">
<div class="block_01">
<a>0002</a>
</div>
</div>
</body>
</html>

Malleys,
а можно уточнить один момент в твоём посте?

всё работает отлично, всё подсвечивает и прокручивает как надо, но прокручивает именно до подсвеченной ссылки, что смотрится не очень хорошо, возможно ли прокрутить на два пикселы меньше? чтобы сохранить расстояние от родительского блока равное маргину от предыдущей ссылки

народ, как исправить 33 строку? отнять надо два пикселя, чтобы прокручивало не до самой ссылки а только прятала предыдущую ссылку, а расстояние между ссылками(маргин) было в видимой области?

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Cactaceae</title>
	<style>
		body { font: 14px normal Times, serif; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { color: #005aff; text-decoration: none; } 
		a:visited { color: #5995ff; text-decoration: none; } 
		a:hover { color: #7a00ff; text-decoration: none; }
		.act { text-decoration: underline; }
		.efg { color: #167016; }
		.def { color: #127a12; }
		.cde { color: #0d850d; }
		.bcd { color: #068f06; }
		.abc { color: #009900; }
	</style>
	<script>
	document.addEventListener("DOMContentLoaded", function() {
			var links = Array.prototype.slice.call(document.links);
			var classes = ["act",  "abc", "bcd", "cde", "def", "efg"];
			var href = location.href;
			for(var index = 0, length = links.length, link; index < length; index++) {
				link = links[index];
				for(var level = 0, part = href; level < classes.length; level++) {
					if(link.href === part || link.href === part + "/") {
						if(level === 0) {
							var p = document.createElement("span");
							p.className = classes[level];
		p.innerHTML = link.innerHTML;
link.parentNode.replaceChild(p, link);

	p.scrollIntoView();
} else {
	link.className = classes[level];
						}
						break;
					}
					part = part.replace(/\/[^/]*\/?$/, "");
				}
			}
		});
         </script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel/">razdel/</a><br>
	<a href="/razdel/01.html">page-01</a><br>
	<a href="/razdel/02.html">page-02</a><br>
	<a href="/razdel/03.html">page-03</a>
	<div class="menu" id="menu2">
		<a href="/razdel/podrazdel/">podrazdel/</a><br>
		<a href="/razdel/podrazdel/01.html">page-01</a><br>
		<a href="/razdel/podrazdel/02.html">page-02</a><br>
		<a href="/razdel/podrazdel/03.html">page-03</a>
		<div class="menu" id="menu3">
			<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
			<div class="menu" id="menu4">
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Блин, неужели и сейчас неправильно сформулировала вопрос, неужели непонятно о чем я спрашиваю?

Блондинка,
попробуйте так,

p.scrollIntoView(); window.scrollBy(0,-5);