На самом деле я ужасно понимаю происходящее, и могу легко понести ахинею.
|
Можно так попробовать:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('input[name=sw]').click(function(){
var v =$(this).val();
$('#one,#two,#three').hide().filter('#'+v).show();
if(v!='three')
return;
$(document).ready(function(){
$("#three").load("3.html pre",function(){
var css=['styles/shCore.css','shThemeDefault.css'],
js=['shCore.js','shBrushCss.js','shBrushXml.js','shBrushJScript.js'],
load_hundler=function(){
if(++counter==total)
SyntaxHighlighter.all();
},
total=css.length+js.length,
counter=0;
for(var i=0;i < css.length;i++){
var node=document.createElement('link');
node.rel='stylesheet';
node.href='syntaxhighlighter/styles/'+css[i];
node.onload=load_hundler;
document.head.appendChild(node);
};
for(i=0;i < js.length;i++){
var node=document.createElement('script');
node.href='syntaxhighlighter/scripts/'+js[i];
node.onload=load_hundler;
document.head.appendChild(node);
};
});
});
});
});
</script>
</head>
<body>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" class="none"></div>
<div id="two" class="none"></div>
<div id="three" class="none"></div>
</body>
</html>
В 3-х вещах не уверен: 1. jq.load может не разобрать кашу из html в файле 3.html; 2. jq.load по селектору может вернуть только inner html; 3. в функции load_hundler переменные counter и total могут отсутствовать. |
Nexus,
Так не засветилось. |
daslex, смотрите консоль.
Гадать причину желания нет. |
Да ладно. Сделаю на iframe. Ничего страшного не произойдёт. Только со стилями возиться придётся.
|
daslex, как знаете.
По идее того, что я написал должно быть достаточно, т.е. "победа близка". Нужно только выяснить, что пошло не так. |
daslex,
Я попробовал вариант по пост№6, но не со статичным содержимым, а с подгрузкой текста, который нужно подсветить, в обертке pre, например, такой файл: <pre class="brush: html"> <div class="wraperr2"> <div class="lefmenu">Hello world </div> <div class="content"> </div> </div> </pre> и последующим запуском SyntaxHighlighter.all() - почему-то не срабатывает, обертка pre не преобразуется и подсветки нет. Чем-то добавленный фрагмент ему не нравится. М.Б. стоит попробовать не .html(html), а appendChild. Попробую - отпишусь. |
Обнаружил странную вещь:
Вот такой вариант работает:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" type="text/css">
<link rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script>
$(document).ready(function () {
// $('input[name=sw]').click(function () {
SyntaxHighlighter.all();
// });
})
</script>
</head>
<body>
<input type="radio" name="sw" value="1" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="2" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="3" id="x3"><label for="x3">3</label>
<div id="one">
<pre class='brush: html'>
alert("Victory");
</pre>
</div>
</body>
Убираю // - по клику не работает. |
| Часовой пояс GMT +3, время: 07:23. |