Как выделить соответствующие заголовки по нажатым ссылкам? - PullRequest
Новая
       12

Как выделить соответствующие заголовки по нажатым ссылкам?

1 голос
/ 27 апреля 2010

Я пишу XSL-файл, который содержит боковое меню со списком ссылок. Когда пользователь нажимает на одну из ссылок, страница переходит к соответствующей таблице информации для этой ссылки. Как сделать так, чтобы при щелчке по ссылке выделялся заголовок этой таблицы (а не сама ссылка)? Также следует снять выделение, если нажата другая ссылка.

Вот меню ссылок: 

<div onclick = "highlight(this);" onblur = "undoHighlight(this);">
<a href = "#{generate-id(.)}">
<xsl:value-of select = "."/> (<xsl:value-of select = "count(../n1:entry)"/>)
</a>
</div>

Это javascript для функций highlight / undoHighlight: 

function highlight(link)
{
     undoHighlight(link)
     link.style.background = "red";
}
function undoHighlight(link)
{
     link.style.background = "white"; 
}

Любая помощь будет оценена. Заранее спасибо!

Редактировать: вот общий шаблон для таблиц 

<!-- Component/Section -->    
<xsl:template match="n1:component/n1:section">
    <xsl:apply-templates select="n1:title"/>
    <xsl:apply-templates select="n1:text"/>
    <xsl:apply-templates select="n1:component/n1:section"/>    
</xsl:template>

<!--   Title  -->
<xsl:template match="n1:title">
<div id = "dataTitleStyle">      
    <a name="{generate-id(.)}"><xsl:value-of select="."/></a>
</div>
</xsl:template>

<!--   Text   -->
<xsl:template match="n1:text">  
<xsl:apply-templates />
</xsl:template>

1 Ответ

0 голосов
/ 19 февраля 2011

Я предоставил пример страницы вывода, используя jquery для выделения в меню.

Вам придется изменить селекторы в jquery, потому что теперь я не все окружающие элементы на вашей странице. Надеюсь, что это помогает или, по крайней мере, дает вам вдохновение; -) 

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
              // Add a click handler on in-page links 
              // You'd better provide another selector but I don't know the surrounding elements. I selected all a elements that contain a '#' inside a div.
              $('div a[href*=#]').click(function() {
                var theID = $(this).attr('href');
                var targetElementName = theID.substring(theID.indexOf('#') + 1)
                // "unhighlight" other elements
                // Set bg of all datatitlestyle elements to blue
                $('.dataTitleStyle > a[name]').parent().css('background','blue');
                // highlight the element
                // Set bg of clicked datatitlestyle element to red
                $('.dataTitleStyle > a[name=' + targetElementName + ']').parent().css('background','red');
              });
            });
        </script>
    </head>
    <body>
        <!-- The menu -->
        <div>
            <a href="#this_is_the_id">
                The output of xslt 1
            </a>
            <br />
            <a href="#this_is_the_second_id">
                The output of xslt 2
            </a>
        </div>
        <!-- Content -->
        <div class = "dataTitleStyle" style="background: blue;">      
            <a name="this_is_the_id">A title</a>
        </div>
        <div class = "dataTitleStyle" style="background: blue;">      
            <a name="this_is_the_second_id">A second title</a>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...