CSS JavaScript显示用户点击下一个/上一个Div的内容 [英] CSS Javascript to display content of next/previous Div on user click

问题描述

我有一个XML文件，它存储使用JSP页面中包含的Java Hashtable显示的内容（它目前使用的scriplet，我现在知道是不好的做法）

I have an XML file which stores content which is displayed using a Java Hashtable contained in a JSP Page (Its currently useing scriplets which I now know are bad practice)

随着XML内容的数量的增加，我需要开始显示这批批量的例如5 < sliceContent> divs，然后给用户选择点击next。我有下一个div在结尾。我当然也必须添加一个previous选项。

As the amount of XML content has increased I need to start displaying this in batches of e.g. 5 <sliceContent> divs and then give the user the option of clicking next. I have the "Next" div at the end. I will of course also have to add a 'previous' option.

我不知道我在找什么，我找到了一些帖子，如这个帖子，但我不能真正跟随。这可以通过CSS单独完成，还是需要在Java中实现？

I am not sure what i am looking for, i have found a few posts such as this post but i cant really follow. Can this be done by CSS alone or do i need to implement it in Java?

再次感谢任何建议。

编辑我已经重新标记CSS和JavaScript，因为我被告知这是我需要的。

EDIT I have retagged this with CSS and Javascript as i have been told this is what i need.

我的XML（内容可扩展到多个段落）

My XML (content can extend to several paragraphs)

<slice><sliceContent> Content element 1 </sliceContent></slice>
<slice><sliceContent> Content element 2 </sliceContent></slice>
<slice><sliceContent> Content element 3 </sliceContent></slice>

我的Java（包含在JSP页面中）

My Java (contained in a JSP page)

<div class='result-container'>
<ul class="menu menu-style">
 <li>
    <a href="javascript:;">Concept for <%=keywords%></a>
            <ul xmlns:sparql-results="http://www.w3.org/2005/sparql-results#" class="menu menu-style">      
      <li>
        <a href="javascript:;">
            <span>Show Concept</span>
        </a>
<ul class="wer">
<%

    String testContent = contentPara;
    String startTag = "sliceXML\">"; 
    String endTag = "<";
    String xmlMatch = null; 
    String hashMatch = null;        

    int startPosition = testContent.indexOf(startTag);              
    if(startPosition >1)
    {               
        int subStringIndex = startPosition + startTag.length(); 
        int endPosition = testContent.indexOf(endTag, subStringIndex);      
        if(endPosition >= startPosition)
        {
            xmlMatch = testContent.substring(subStringIndex, endPosition);
        }   

        if(xmlMatch == null)
        {
        out.println("No concept matches for your query!" );     
        }
        else
        {

Hashtable<String, String> table = new Hashtable<String, String>();
(hash table links here)

        try{    
            FileInputStream fstream = new FileInputStream(table.get(xmlMatch));                 

            // Get the object of DataInputStream
            DataInputStream in = new DataInputStream(fstream);
            BufferedReader br = new BufferedReader(new InputStreamReader(in));
            String strLine;

        //Read File Line By Line
            while ((strLine = br.readLine()) != null)   
            {
                out.println (strLine);
            }               

        //Close the input stream
            in.close();
        }
            catch (Exception e)
            {
                //Catch exception if any
                System.err.println("Error: " + e.getMessage());
            }
        }

   }
      <li>
      <div class="next-div">
      <a class="next">Next<img height="10px" src="images/more.png" />
      </a>
    </div>
  </li>
  </ul>
  </li>
  </li>
  </ul>

  </div>

推荐答案

可以使用javascript：

You can do this with javascript:

<script type="text/javascript" language="JavaScript">
function showContent(){
document.getElementById('showContent').innerHTML = "Here is the text we want to show";
}
</script>

HTML：

<a href="#" onclick="showContent()">showContent</a>
<div id="showContent"></div>

这篇关于CSS JavaScript显示用户点击下一个/上一个Div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！